4、VUE指令之if、show、model

（它控制的是组件的加载和卸载的操作 =>DOM的增加和删除）

控制当前元素是否在结构中加载

定义

v-if = '判断体'

使用

如果判断体的结果是TRUE，当前元素会在结构中显示，如果是FALSE，当前元素会在结构中移除

使用是中间不能穿插其他标签

如原生的 if...else if...else

还有对应的 v-else-if / v-else 等指令

注意

多个元素条件一样，又不想在结构中添加父标签， 可以使用 template 作为父标签，把他们包裹起来

在这里 template 的作用：指定当前渲染的模板

顺序如图

template

扩展：template

v-if

基于 display ：none 控制元素的显示隐藏

v-show = ‘变量’

true ：是显示

false ：是display:none

v-show 后边跟的是一个布尔类型（其他类型会默认转成布尔）

v-show

v-if 是整个标签都不加载

v-show 是加载了标签，的同时设置了 display：none 的属性

1、条件不成立时：

v-if 有比较大的切换开销

v-show 有比较大的初始加载开销

2、性能消耗方面

在过于频繁的切换操作中，v-if 明显要比 v-show 性能低一些

v-if 和 v-show 的区别

一般给表单元素设置的，实现表单元素和数据之间的相互绑定

v-model = '变量'

视图 数据

数据改变 表单元素的内容跟着改变，内容改变 数据也会跟着更新

效果

1）先把数据绑定给表单元素 ，一般把数据赋值给表单元素的value

2）监听表单元素的内容改变

3）内容改变后，会把对应的数据也改变

4）对应的数据改变，视图中所有用到数据的地方都会重新渲染

原理

v-model

1.按照 v-model 进行分组，单选框装备的数据是一个值，复选框准备的数据是一个数组

2.每一个框都有自己的value，谁被选中，数据值就是被选中元素的value值；相反，值是多少，对应value的元素也会被默认选中；

ary 中存放的是 被选中的那些 checkbox 的 value 值

<input value='1' type=\"checkbox\" v-model='ary'> <input value='2' type=\"checkbox\" v-model='ary'> <input value='3' type=\"checkbox\" v-model='ary'>

复选框

sex:'女' ：就是默认选中的是 value 为 女 的元素

sex 存储就是选中的那个 radio 的 value 值

<input type=\"radio\" value='男' v-model='sex'> <input type=\"radio\" value='女' v-model='sex'>

单选框

food存储的是 里边 option 对应的 value 值

food:'rice'  ：默认展示的是 value 为 rice 的元素 

<select v-model='food'>    <option value=\"rice\">米</option>    <option value=\"app\">苹果</option>    <option value=\"bana\">香蕉</option> </select>

下拉框

例如

表单 v-model 使用

VUE 指令 if/show/model