一、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中绑定数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。