数据绑定
数据绑定使用 Mustache 语法(同时支持双大括号、单大括号)将变量或表达式包起来,可以用于绑定文本内容或元素属性。
绑定文本
绑定文本使用 Mustache 语法,变量需要在data中定义。
<template>
<text>{{msg}}</text>
</template>
<script>
export default {
name: 'test',
data(){
return {
msg: 'hello'
}
}
}
</script>
大括号里面的内容也可以为表达式时,如:
<text>{{'message: ' + this.data.msg}}</text>
绑定属性
绑定属性可以使用 Mustache 语法,也可以使用v-bind指令。
使用 Mustache 语法:
<text text={{msg}}></text>
使用v-bind指令:
<text v-bind:text="msg"></text>
计算属性
数据绑定的变量也可以是计算属性,如:
<template>
<text v-bind:text="message"></text>
</template>
<script>
export default {
name: 'test',
data(){
return {
msg: 'hello'
}
},
computed:{
message:function(){
return 'message:' + this.data.msg;
}
}
}
</script>