文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
1
| <span>Message: {{ msg }}</span>
|
双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<span> Message：{{msg}}</span>
</template>
<script>
export default {
name:"text",
data(){
return{
msg:"消息提醒"
}
}
}
</script>
|
原始 HTML
双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<template>
<div>
<p>插值方式：{{rawHtml}}</p>
<p >HTML方式:<span v-html="rawHtml"></span></p>
</div>
</template>
<script>
export default{
name:"RawHtml",
data(){
return {
rawHtml:"<a href='http://www.baidu.com'>百度</a>"
}
}
}
</script>
|
Attribute 绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
1
| <div v-bind:id="dynamicId"></div>
|
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
简写
1
| <div :id="dynamicId"></div>
|
开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<div v-bind:id="dynamicId">
Attribute 绑定ID
</div>
<div :id="dynamicId">
Attribute 绑定ID 简写
</div>
</template>
<script>
export default {
name: "attributeBindings",
data() {
return {
dynamicId: "10001"
}
}
}
</script>
|
使用 JavaScript 表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <template>
<div>
<p>{{number +1}}</p>
<p>isok:{{ok ? 'YES':'NO' }}</p>
<p>message:{{message.split('').reverse().join('')}}</p>
</div>
</template>
<script>
export default {
name: "JavaScript",
data() {
return {
number:10,
ok:'YES',
message:'Hello'
}
}
}
</script>
|
这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
1
2
3
4
5
6
| <!-- 这是语句，不是表达式-->
{{ var a = 1 }}
<!--流程控制也不会生效，请使用三元表达式-->
{{if(ok) { return message }}}
|