6.v-if、v-show与v-for指令
程序员文章站
2022-06-28 12:58:58
1. v-if(控制dom存在与否)与v-show(控制dom显示与否)首先准备一个基础代码 页面展示效果入下范例:点击按钮,helloworld或显示或隐藏需要借助:v-if、v-show指令在Vue实例之中定义一个数据,叫做show默认值为true,在挂载点处添加v-if,它的值等于show这个数据项只有show等于true,div存在。如果show这个变量等于falsediv不存在。观察下面的现象继续编辑代码......
1. v-if(控制dom存在与否)与v-show(控制dom显示与否)
首先准备一个基础代码
页面展示效果入下
范例:点击按钮,helloworld或显示或隐藏
需要借助:v-if、v-show指令
在Vue实例之中定义一个数据,叫做show默认值为true,在挂载点处添加v-if,它的值等于show这个数据项
只有show等于true,div存在。如果show这个变量等于falsediv不存在。观察下面的现象
继续编辑代码
重点:v-if与v-show的区别
v-if当它对应的数据项的内容是false的时候,它会把这个标签直接从dom中移除
v-show当它对应的数据项的内容是false的时候,它会把这个标签隐藏,这个时候变迁不会从dom中清除,而只是把标签的属性编程了null.
如果点击显示频率高用v-show,如果点击频率低用v-if更好。
2.v-for(页面上循环内容的展示)
v-for当你有一个数据需要做循环展示的时候,它会帮助你把这个数据做循环,每一条数据展示一个li标签
- 编码思路
1)在数据项里面定义一个列表,它是一个数组,里面有3条数据。
2)希望在页面上把数据里的数据循环展示出来。展示在ul里面,每一项都是一个li标签
- item of list
1.循环list数据项
2.每一次循环的内容放入item变量里面,循环展示li,就可以输出出来
- key="item"
加入属性提升性能,key值要不同
-
v-for="(item,index) of list" :key="index": 1.循环list数据列表,每一项内容放入item里面,每一项下标放入idex里面 2.使用index作为key也不是一个特别好的选择 3.现在应用场景列表渲染之后,不需要对列表进行排序等很多额外的操作,这个时候用index没有问题。 4.频繁的对列表需要做变更的时候,index里面存在问题
本文地址:https://blog.csdn.net/jianjian_5201314/article/details/109252576