上兩節我們學習了vue的實例知識：

第4節：vue實例的4個常用選項

第5節：vue 實例的生命周期

提醒一下，這兩節的內容在后面實戰的時候很重要，如果落下的同學可以回去翻看學習，不必害怕難學，這里沒有難學的教程。

這一節，我們學習如何在html上綁定我們實例中的數據。

Mustache 語法

什么叫Mustache語法，別被這高大上的叫法嚇到了，其實就是雙大括號{{ }}的寫法，在之前的章節我們就演示過在視圖中顯示我們的數據，這是最常見的綁定方式。有了它，我們可以輕松地在視圖顯示我們的數據并及時自動更新，無需手動控制。

?<div id="app">{{ name }}</div>
?<script>
?let app = new Vue({
??? el:"#app",
??? data:{
??? ?name:"前端君"
??? }
?});
?</script>

?

十分簡單，頁面視圖上也成功顯示我們的data中的name的值：“前端君”。

（再復習一遍）

?

綁定純html

有時候有一種這樣的需求，我們的數據包含了一些html的標簽代碼，比如：?

name:"<strong>前端君</strong>"
?

文本“前端君”被一個<strong>標簽包住，而我們在展示的是，需要合理地渲染strong標簽，再顯示我們想要展示文本內容。這種情況，用原來的雙大括號{{? }}方式，就不能滿足了，它會渲染成這樣：

（這不是我想要的）

<strong>被當作是普通的文本數據被展示了，這并不是我們想要的結果。這個是時候，你需要用vue提供的v-html指令，用法如下：

<div id="app" v-html="name"></div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
?????name:"<strong>前端君</strong>"
??? }
});
</script>

v-html以屬性的形式添加到了div中，值為“name”，也就是我們數據data中的name：

"<strong>前端君</strong>"

?

我們來看看視圖展示的結果：

（這才是我想要的效果）

視圖上的“前端君”有了明顯的加粗效果，說明<strong>標簽發揮了作用，我們通過chrome的開發者工具查看解析生成后的html文檔，name的值，被解析成html標簽，并作為字節點，插入在<div id=”app”></div>中去。

這，就是v-html的作用啦。

?

綁定屬性

前面兩個都是控制視圖展示文本內容，有時候，html標簽的屬性也很重要，比如：<a>標簽的href屬性，<img/>標簽的src屬性等。Vue中如何將data中的數據綁定為這些屬性的值呢？還是用雙大括號{{ ?}}的寫法嗎？

當然不是，這里不需要用雙大括號{{ }}，我們用v-bind指令，如下：

?

<div id="app">
???<!--在href前用v-bind：修飾-->
???<a v-bind:href="link">hello官網</a>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
?????link:"http://hello.com"
??? }
});
</script>

在視圖中的a標簽，我們在<a>標簽加上v-bind:來修飾href屬性，而它的值就是data中的屬性link。我們來看看解析渲染的html頁面效果。

（href屬性的值成功解析出來了）

標簽<a>的屬性href的值成功地綁定了data數據link的值，通過v-bind指令，就成功地將數據成功地綁定在視圖的標簽的屬性中。

?

v-bind 指令的簡寫

對于v-bind指令，如果一個標簽中需要綁定多個屬性的話，就得連續寫多個v-bind。

問題是沒問題，但vue為了我們的代碼更簡潔易看，提供了v-bind指令的簡寫，僅需要冒號。

?

原本完整的寫法：

<!--完整的寫法-->
<a v-bind:href="link">hello官網</a>

?

簡潔的寫法：

<!--縮寫-->
<a :href="link">hello官網</a>

此外，需要注意的是：當渲染的屬性值是布爾值的時候（true和false），效果就不一樣了，并不是簡單地將true或者false渲染出來，而是當值為false的時候，屬性會被移除。

?

我們試試看：?

<div id="app">
???<!--我們用縮寫的語法-->
?? <button :disabled="dis_true">
????? 我是true
???</button>
???<button :disabled="dis_false">
????? 我是false
?? </button>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
????? dis_true:true,
??????dis_false:false
??? }
});
</script>

我們通過v-bind指令的縮寫，給兩個button標簽的disabled屬性綁定值，一個值為true，一個值為false，我們來看看效果：

（第二個button的disbaled屬性被移除了）

我們看到，當屬性值設置成true的時候，disabled的值為解析成“disabled”，當屬性值設置成false的時候，屬性disabled直接被移除掉了。

支持javascript表達式

上面講到的都是將數據簡單地綁定在視圖上，但事實上，vue還支持我們對數據進行簡單的運算：javascript表達式支持。

我們舉3個例子演示一下：

?

1.加減乘除運算：

<div id="app">{{ num+3 }}</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? num:2
??? }
});
</script>

上面的案例，在渲染的時候，并不是直接渲染data的num，而是對num進行的簡單的加法：num+3，渲染的結果為：5。

（結果為：5）

?

2.三元運算符：

<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
? ??????ok:true
??? }
});
</script>

三元運算符計算，上面元算的結果為：“yes”。

（三元運算后的結果為：“yes”）

3.字符串拼接：

<div id="app">
? <a :href="'http://'+host">hello官網</a>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? host:'hello.com'
??? }
});
</script>

<a>標簽的href屬性的值通過兩個字符串的拼接起來，我們看看最后拼接效果：

（字符串拼接成功）

?

注意：

雖然vue支持javascript表達式運算，我們只會在運算比較簡單的情況下才會這么玩，當運算比較繁瑣復雜的時候，一定要用vue的computed屬性來進行計算。

本節小結

在視圖綁定數據的方法：Mustache語法（雙大括號語法），綁定純HTML，綁定屬性，支持javascript表達式的寫法，以及表達式寫法和computed區別。

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

總結

以上是生活随笔為你收集整理的第六节：教你如何在html中绑定数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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