v-model 特點
指令是帶有’v-'字首的特殊屬性。
指令的職責是，當指令對應的值發生改變的時候，将其産生的連帶影響，響應式地作用于Dom.
v-model
可以幫助我們實作在表單控件或者元件上建立雙向資料綁定。
例子：
<body>
<div id="app">
<!-- 此處增加一個輸入框，并且添加v-model指令，使之與msg進行綁定
注意寫法：雙引号内不需要添加插值
-->
<input type="text" v-model="msg">
{{msg}}
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
msg:'vue'
},
computed:{
},
});
如上圖，當msg這個值發生改變的時候，将會改變輸入框内的值，相應也改變頁面的msg的值。
當我們改變輸入框内的值的時候，vm執行個體中的msg值也會發生相應的改變。
v-once
隻渲染元素群組件一次。随後的重新渲染，元素/元件及其所有的子節點将被視為靜态内容并跳過。這可以用于優化更新性能。
例子：在網頁上，我們的logo或者頁腳網站有關資訊以及相關連結隻需要渲染一次就可以，不需要相應使用者的操作。
<div id="app">
<!-- 此處增加 -->
<div v-once>
<img src="logo.png" />
</div>
</div>
v-html
可以簡單了解為能夠識别标簽,主要是用來渲染标簽代碼
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 此處增加 -->
<div v-once >
<img src="logo.png" />
</div>
<div>
{{msg}}
</div>
<div v-html='msg'> //v-html右邊要綁定對那個資料進行渲染
{{msg}}
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
msg:'<p style="color:red ">vue</p>'
},
});
</script>
</body>
</html>
v-if
根據表達式的值的真假條件渲染元素。當條件為真時，進行渲染，當條件為假的時候，不進行渲染。
例子：當toggle為true的時候，顯示美女，否則，顯示帥哥
<body>
<div id="app">
<!-- 此處增加 -->
<p v-if="toggle">帥哥</p>
<p v-if="!toggle">美女</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
toggle:false
},
});
</script>
</body>
v-else
相當于javascript 中else的意思，它必須跟着v-if,充當else功能。
例子：上面的兩個v-if标簽，可以使用v-else替代。
<body>
<div id="app">
<!-- 此處增加 -->
<p v-if="toggle">帥哥</p>
<p v-else="toggle">美女</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
toggle:false
},
});
</script>
</body>
v-else-if
一般在v-if或者v-else-if元素之後
<div id="app">
<!-- 此處增加 -->
<p v-if="type==A">帥哥</p>
<p v-else-if="type==B">帥哥</p>
<p v-else="type==C">帥哥</p>
</div>
v-if指令比較耗性能，因為當條件為真，它會讓元素進行顯示，顯示的原理就是插入标簽元素，如果條件為假，就把标簽從網頁中删掉。對于頻繁顯示與隐藏的元素，一般使用v-show來取代。
v-show
根據表達式之真假值，切換元素的 display CSS 屬性。 可以通俗了解，元素顯示或者隐藏，控制是元素的css樣式的display屬性，顯示相當于設定display=‘block’， 隐藏相當于 display=‘none’。
<body>
<div id="app">
<!-- 此處增加 -->
<p v-show="toggle">帥哥</p>
<p v-show="!toggle">美女</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
toggle:false
},
});
</script>
</body>