v-if
定义
控制当前元素是否在结构中加载
（它控制的是组件的加载和卸载的操作 =><b><font color="#c41230">DOM的增加和删除</font></b>）<br>
注意
如果判断体的结果是TRUE，当前元素会在结构中显示，如果是FALSE，当前元素会在结构中移除<br>
还有对应的 v-else-if / v-else 等指令
如原生的 if...else if...else
使用是中间不能穿插其他标签
扩展：template
<b><font color="#c41230">多个元素条件一样</font></b>，又不想在结构中添加父标签， <b><font color="#c41230">可以使用 template 作为父标签</font></b>，把他们包裹起来
template
let vm = new Vue({<br> el:'#app',<br> template:'标签',<br> data:{......}<br>}).$mount('#app');<br>
在这里 template 的作用：指定当前渲染的模板
v-show
定义
基于 display ：none 控制元素的显示隐藏
注意
v-show 后边跟的是一个布尔类型（其他类型会默认转成布尔）
true ：是显示
false ：是display:none
v-if 和 v-show 的区别
1、条件不成立时：
<b><font color="#c41230">v-if </font></b>是整个<b><font color="#c41230">标签都不加载</font></b>
<b><font color="#c41230">v-show</font></b> 是<b><font color="#c41230">加载了标签</font></b>，的同时<b><font color="#c41230">设置了 display：none 的属性</font></b>
2、性能消耗方面
<b><font color="#c41230">v-if</font> </b>有比较<b><font color="#c41230">大</font></b>的<b><font color="#c41230">切换开销</font></b>
<b><font color="#c41230"> v-show</font></b> 有比较<b><font color="#c41230">大</font></b>的初始<b><font color="#c41230">加载开销</font></b>
在过于<b><font color="#c41230">频繁的切换操作</font></b>中，<b><font color="#c41230">v-if 明显要比 v-show 性能低</font></b>一些
v-model
定义
一般给表单元素设置的，实现表单元素和数据之间的相互绑定
效果
视图 <=> 数据
数据改变 表单元素的内容跟着改变，内容改变 数据也会跟着更新<br>
原理
1）先把数据绑定给表单元素 ，一般把数据赋值给表单元素的value
2）监听表单元素的内容改变
3）内容改变后，会把对应的数据也改变
4）对应的数据改变，视图中所有用到数据的地方都会重新渲染
表单 v-model 使用
定义
1.<b><font color="#c41230">按照 v-model 进行分组</font></b>，单选框装备的数据是一个值，复选框准备的数据是一个数组<br>
2.<b><font color="#c41230">每一个框都有自己的value</font></b>，谁被选中，数据值就是被选中元素的value值；相反，<b><font color="#c41230">值是多少，对应value的元素也会被默认选中</font></b>；
例如
复选框
<input value='1' type="checkbox" v-model='ary'><br> <input value='2' type="checkbox" v-model='ary'><br> <input value='3' type="checkbox" v-model='ary'><br>
ary:[1,3] ：就是默认选中 value 为 1 和 3 的元素
ary 中存放的是 被选中的那些 checkbox 的 value 值
单选框
<input type="radio" value='男' v-model='sex'><br> <input type="radio" value='女' v-model='sex'><br>
sex:'女' ：就是默认选中的是 value 为 女 的元素
sex 存储就是选中的那个 radio 的 value 值
下拉框
<select v-model='food'><br> <option value="rice">米</option><br> <option value="app">苹果</option><br> <option value="bana">香蕉</option><br> </select><br>
food存储的是 里边 option 对应的 value 值
food:'rice' ：默认展示的是 value 为 rice 的元素
