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