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>