Vue从入门到实战：插值

实例

[Vue从入门到实战：Vue实例]

解析

• 数据绑定最常见的形式就是使用Mustache语法的文本插值

<p>{{message}}</p>

Mustache标签会被替换为Vue实例中数据对象上message属性的值。只要绑定的数据对象上message属性发生了改变，插值处的内容就会被更新。

使用Chrome浏览器打开页面，按F12键切换到Console窗口，输入vm.message="welcome you" 然后按Enter键，可以看到页面的内容发生了同步的更新。

• 如果绑定的数据中包含了HTML代码，那么使用Mustache语法（双花括号）将把HTML代码以普通文本的方式进行输出，如第15行代码所示

• 如果要输出真正的HTML代码，需要使用v-html指令，如第17行代码所示。

• Mustache语法 不能作用于HTML元素的属性上，要解决HTML元素属性值的绑定问题，需要使用v-bind指令，如第19行代码所示。

• 除了绑定简单的属性值外，vue.js还提供了完全的javascript表达式支持。

{{a+b}}
 {{ is login ?username: "notlogin" }}

要注意，每个绑定都只能包含单个表达式。