html中绑定一个字段,四、在html中绑定数据
一、Mustache 語法
最常見的綁定方式，視圖顯示數據并及時自動更新，無需手動控制。
{{name}}new Vue({
el:"#app",
data:{
name:"hiddensmile"
}
})
釋：頁面視圖上成功顯示的data中的name的值:“hiddensmile”。
成功顯示的data中的name的值
二、綁定純html
數據包含了一些html的標簽代碼
{{name}}new Vue({
el:"#app",
data:{
name:"hiddensmile"
}
})
釋：文本“hiddensmile”被一個標簽包住，此時strong標簽也會被渲染出來，用原來的雙大括號{{ }}方式，不能滿足，需要用vue提供的v-html指令
v-html渲染成功
釋：明顯的加粗效果，說明< strong >標簽發揮了作用。
三、綁定屬性
html標簽的屬性也很重要，比如：< a >標簽的href屬性，標簽的src屬性等,此時用用v-bind指令；
百度
new Vue({
el:"#app",
data:{
link:"https://www.baidu.com/",
}
})
釋：在視圖中的a標簽，在< a >標簽加上v-bind:來修飾href屬性，而它的值就是data中的屬性link；
注：v-bind 指令的簡寫(v-bind指令的簡寫，僅需要冒號。)
原本完整的寫法：
百度
簡潔的寫法：
百度
注：當渲染的屬性值是布爾值的時候(true和false)，效果就不一樣了，并不是簡單地將true或者false渲染出來，而是當值為false的時候，屬性會被移除。
百度
我是真的
我是假的
new Vue({
el:"#app",
data:{
link:"https://www.baidu.com/",
show_true:true,
show_false:false,
}
})
當值為false的時候，屬性會被移除
注：當屬性值設置成true的時候，disabled的值為解析成“disabled”，當屬性值設置成false的時候，屬性disabled直接被移除掉了。
四、支持javascript表達式 (對數據進行簡單的運算：javascript表達式支持)
1) 加減乘除運算：
{{num+3}}new Vue({
el:"#app",
data:{
num:5,
}
})
直接渲染結果
注：在渲染的時候，并不是直接渲染data的num，而是對num進行的簡單的加法：num+3，渲染的結果為：8。
2) 三元運算符：
{{num+3}}
{{ ok ? 'yes':'no' }}
new Vue({
el:"#app",
data:{
num:5,
ok:true,
}
})
注：三元運算符計算，上面元算的結果為：“yes”。
三元運算符渲染成功
3) 字符串拼接：
百度
new Vue({
el:"#app",
data:{
host:"baidu.com",
}
})
注：雖然vue支持javascript表達式運算，在運算比較簡單的情況下才會這么玩，當運算比較繁瑣復雜的時候，一定要用vue的computed屬性來進行計算。
總結
以上是生活随笔為你收集整理的html中绑定一个字段,四、在html中绑定数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android耳机广播,Android利
- 下一篇： wamp编写html页面空白,Win10