插值表达式
作用：展示在data中定义的数据
-
使用方法：{{ data定义的属性名 }} :这个变量必须先定义，一般在data函数中定义
注:只能写在标签之间，既是只能使用在双标签，它不能当成标签的属性来使用. 使用它会把数据插入原有内容中,而不是把标签内的内容全部改变
细节
1.数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{{}} 中写表达式,有自动更新后台数据的功能
例如：
<span>Message: {{ msg }}</span>
{{}} 标签内将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
2.可以在上面写js代码
{{}}对JavaScript 表达式支持，例如：
进行简单的运算;
{{ number + 1 }}
可进行简单的字符串拼接
{{ str + 'jack'}}
简单的三元表达式
{{ ok ? 'YES' : 'NO' }}
可写下js的api
{{ message.split('').reverse().join('') }}
但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 这也是语句，不是表达式 -->
{{ number++ }} 会报警告：vue2.js:482 [Vue warn]: You may have an infinite update loop in a component render function.
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
<script>
export default {
data(){
return {
msg:'小明',
number:2,
str:"hello",
ok:true,
message:"world"
}
}
}
</script>
<style lang="less">
</style>
-
常见错误：
miss.png
