最近發現更新得越快，后臺的收到的催更消息就越多，這個號只有我一個人在寫教程，寫的速度難免跟不上大家閱讀的速度，我盡量多抽時間來寫教程，喂飽你們！

這一節我們來學習并掌握在實戰用一定會用到的10個指令，沒錯，是一定會用到，通過這些指令，可以讓我們很方便的完成某些操作。掌握了這幾個指令，我們距離實戰就又近了一步。

1. v-text 指令

?v-text? 指令用于更新標簽包含的文本，它的作用跟雙大括號的效果一樣。我們看看它的用法：

?<div id="app">
??? <p v-text="msg"></p>
?</div>
?<script>
?let app = new Vue({
??? el:"#app",
??? data:{
??????? msg:'hello,vue'
??? }
?});
?</script>

我們給<p></p>標簽加上了指令?v-text?，它的值就是我們data數據中的msg，就這么簡單，最后我們來看看渲染結果：

（渲染成功）

有沒有發現，它的作用跟{{ msg }}效果是一樣的：

<p v-text="msg"></p>
<!--效果相同-->
<p>{{ msg }}</p>

?

2. v-html 指令

這個指令我們再上一節剛剛講過，它幫助我們綁定一些包含html代碼的數據在視圖上，比如：“<b>hello,vue</b>”，這個字符串包含了<b>標簽，要想<b>不被當作普通的字符串渲染出來，就得用?v-html 指令。

<div id="app">
??? <p v-html="msg"></p>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
????? msg:'<b>hello,vue</b>'
??? }
});
</script>

還是上面的代碼，我們把?v-text?指令換成?v-html?指令，msg的值變成了含有html代碼的：“<b>hello vue</b>”，我們看看渲染效果：

?（效果圖）

就這樣，<b>標簽被成功解析并渲染出來，視圖上的文本也有了加粗的效果，這就是v-html發揮了作用，bingo！

?

3. v-show 指令

?v-show?，聽這名字就可以猜測它跟元素的顯示/隱藏 相關，沒錯，它就是用來控制元素的display css屬性的。

?v-show?指令的取值為true/false，分別對應著顯示/隱藏。有比較才能看到效果，我們拿兩個標簽分別設置不同的值，看看解析渲染效果。

<div id="app">
??? <p v-show="show1">我是true</p>
??? <p v-show="show2">我是false</p>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? show1:true,
??????? show2:false
??? }
});
</script>

我們用了兩個<p>標簽，都加上了?v-show?指令，取值分別為true和fasle，直接看效果吧！

?（效果圖）

第一個p標簽的v-show設置為true，元素正常顯示；第二個p標簽的v-show設置為false，元素解析成：

?<p style="display: none">我是false</p>

所以它不會顯示在視圖上。這就是?v-show?指令的用法，簡單明了。

?

?

4. v-if 指令

?v-if?指令的取值也是為true或false，它控制元素是否需要被渲染出來，聽起來有點抽象，不怕，同樣，我們拿兩個元素設置不用的值，對比一下看效果就知道了。

<div id="app">
??? <p v-if="if_1">我是true</p>
??? <p v-if="if_2">我是true</p>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? if_1:true,
??????? if_2:false
??? }
});
</script>

我們把?v-show?指令換成了?v-if?，同樣是兩個<p>標簽，同樣是不同的取值：true和false。我們看效果：

?（效果圖）

看到了吧，設置為true的<p>標簽，成功渲染出來，而設置為false的<p>標簽，直接被一行注釋代替了，并沒有被解析渲染出來。

?

也許你會問了，?v-show?和?v-if?都能控制元素顯示或者隱藏，這兩個怎么區別使用呢？

記住一點：如果需要頻繁切換顯示/隱藏的，就用?v-show?；如果運行后不太可能切換顯示/隱藏的，就用?v-if?。

5. v-else?指令

if和else在編程語言一般都是結對出現的，在vue里面也不例外。它沒有對應的值，但是要求前一個兄弟節點必須要使用?v-if?指令，也對，沒有if，哪來的else。

<div id="app">
??? <p v-if="if_1">我是if</p>
??? <p v-else>我是else</p>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? if_1:false
??? }
});
</script>

我們使用兩個<p>標簽，第一個使用?v-if?指令，并取值為false，第二個使用?v-else?指令，啥也不說了，看效果最直觀：

?（效果圖）

只有第二個<p>標簽被渲染出來，第一個<p>標簽由于?v-if?指令的值為false，直接被忽視了，不渲染。

同理，一旦第一個標簽的?v-if?指令的值為true，被忽視的就是第二個<p>標簽了。?v-if?和?v-else?只有一個會被渲染出來。

有興趣的同學，可以繼續去了解一下?v-else-if?指令，同樣很簡單。

本節小結

學完本節，你應該掌握了?v-text?、?v-html?、?v-show?、?v-if?、?v-else?這5個指令的用法，并能區別使用?v-if ?和 ??v-show?這2個指令。

后面章節的實戰的時候，這些都是會用到的指令，所以要先掌握好，下一章節，我們繼續介紹剩下的5個十分重要指令。

擴展閱讀

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

總結

以上是生活随笔為你收集整理的第七节：实战前必须掌握的10个指令(上)的全部內容，希望文章能夠幫你解決所遇到的問題。

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