數(shù)據(jù)綁定使用 Mustache 語法(同時支持雙大括號、單大括號)將變量或表達(dá)式包起來,可以用于綁定文本內(nèi)容或元素屬性。
綁定文本
綁定文本使用 Mustache 語法,變量需要在data中定義。
<template>
<text>{{msg}}</text>
</template>
<script>
export default {
name: 'test',
data(){
return {
msg: 'hello'
}
}
}
</script>
大括號里面的內(nèi)容也可以為表達(dá)式時,如:
<text>{{'message: ' + this.data.msg}}</text>
綁定屬性
綁定屬性可以使用 Mustache 語法,也可以使用v-bind指令。
使用 Mustache 語法:
<text text={{msg}}></text>
使用v-bind指令:
<text v-bind:text="msg"></text>
計算屬性
數(shù)據(jù)綁定的變量也可以是計算屬性,如:
<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>
更多建議: