1.數據渲染：v-text、v-html、{{}}

1.1 v-text

詳細：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

實例：

<div id="app"> <p v-text="message"></p></div><script>  new Vue({    el:'#app',    data: {      message:'Hello World!'    }  });</script>

1.2 {{}} 和上面的v-text效果一樣

實例：

<div id="app"> <p>{{message}}</p></div><script>  new Vue({    el:'#app',    data: {      message:'Hello World!'    }  });</script>

1.3 v-html

詳細：更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯 。如果試圖使用v-html 組合模板,可以重新考慮通過是否通過使用組件來替代。

注意：在網站上動態渲染任意 HTML 是非常危險的，因為容易導致XSS攻擊。只在可信內容上使用v-html，永不用在用戶提交的內容上。

實例：

<div id="app"> <p v-html="message"></p></div><script>  new Vue({    el:'#app',    data: {      message:'<h5>hello vue.js</h5>'    }  });</script>

2.條件渲染 控制模板隱藏:v-show 、v-if、v-else

2.1 v-show

用法：根據表達式之真假值，切換元素的 display CSS 屬性。當條件變化時該指令觸發過渡效果。

注意： v-show 不支持 <template> 語法

實例：

<div id="app"> <p v-show="isShow">  show </p></div><script>  new Vue({    el:'#app',    data: {      isShow:true    }  });</script>

2.2 v-if

v-show和v-if大體效果相同，不同的是：v-show的元素會始終渲染并保持在DOM中。

用法：根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀并重建。如果元素是 <template> ，

將提出它的內容作為條件塊。當條件變化時該指令觸發過渡效果。

實例：

<div id="app"> <p v-if="isShow">  show </p></div><script>  new Vue({    el:'#app',    data: {      isShow:false    }  });</script>

 2.3 v-else

限制：前一兄弟元素必須有 v-if 或 v-else-if

用法：為v-if 或者v-else-if 添加 “else 塊”

<div id="app"> <p v-if="isShow">show</p> <p v-else>hide</p></div><script>  new Vue({    el:'#app',    data: {      isShow:true    }  });</script>

2.4 v-else-if

<div id="app"> <p v-if="type === 'a'">A</p> <p v-else-if="type==='b'">B</p> <p v-else>C</p></div><script>  new Vue({    el:'#app',    data: {      type:'b',    }  });</script>