欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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显示与否

首先准备一个基础代码

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

    页面展示效果入下

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

 

范例:点击按钮,helloworld或显示或隐藏

需要借助:v-if、v-show指令

在Vue实例之中定义一个数据,叫做show默认值为true,在挂载点处添加v-if,它的值等于show这个数据项

只有show等于true,div存在。如果show这个变量等于falsediv不存在。观察下面的现象

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

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

 

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

 

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

 

继续编辑代码

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

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

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

重点: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里面存在问题
    

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

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

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

 

 

 

本文地址:https://blog.csdn.net/jianjian_5201314/article/details/109252576