4、VUE指令之if、show、model
2022-04-01 12:18:17 0 举报AI智能生成
vue学习
作者其他创作
大纲/内容
（它控制的是组件的加载和卸载的操作 =>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
0 条评论
下一页
