6.v-if、v-show与v-for指令

 

 

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