插值表达式是什么?
分别对比,如下:
Jquery中:text( )函数
原生JS中:innerHTML
VUE中:{{ message }}
<div id="app">
{{ message }}
</div>
这段代码的意思可以用原生js的思路理解为,一个父元素id:app,现在设置他的innerTEXT,设置内容为变量message
exportdefault {
data() {
return {
message:'这里就是显示的文字了'
}
}
//这段代码会被自动渲染为:
<div id="app">
这里就是显示的文字了
</div>
插值表达式也可以放计算结果{computed}
<template>
<div>{{digseo}}</div>
</template>
<script>
export default {
data() {
return {};
},computed:{
digseo(){
return 2+2
}
}
};
</script>
这里{{digseo}}渲染的结果很简单2+4所以结果为4
这里有一个需要注意的点就是{{digseo}}里面的名字需要是computed中函数的名字
比如digseo()>{{digseo}}