Vue_条件渲染和列表渲染

快来打我* 2022-05-22 13:27 212阅读 0赞

**一.条件渲染**

1.v-if：  
v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示

2.v-show：  
v-show=‘show’ show的值true 或 false ，决定着这个标签的是否显示  
两者的区别：当表达式中值是为false时，v-show是display为none；v-if是直接将这个DOM元素从网页中删除。

3.v-else：  
v-else和v-if 成对出现，必须连载一起写，如果中间被其他的DOM隔开，那么将会报错  
eg：

<div v-if="show ==='a'">This is A！</div>
    <div v-else-if="show ==='b'">This is B！</div>
    <div v-else>This is C！</div>
     //当show的值为a时
     show:'a'

效果：  
![这里写图片描述][70]  
当我们用v-if和v-else时，如果页面上有相同的DOM元素（input）  
![这里写图片描述][70 1]  
key值不同，就会出现渲染相同这种bug了。  
  
**二.列表渲染**

v-for ='item of list'

为了提高循环显示性能，我们通常会给列表加一个唯一的key值，可以是列表项（前提是不能有重复的），也可以是索引值

v-for=" (item,index) of list ":key='index'

当然，索引值并不是最好的，不推荐，因为在频繁操作DOM元素的时候，很费性能，没办法充分复用DOM节点

一般来说，在开发过程，后台会给数据唯一的标识，例如id，我们可以用它作为key值。

**修改列表内容：**  
不能通过下标来修改，例如`vm.list[4] = {id:'001',text:'3333'}` 不行  
只能通过操作数组的方法来操作数组。有七个方法。

push 在数组末尾追加元素  
pop 删除并返回数组的最后一个元素  
shift 删除并返回数组的第一个元素  
unshift 向数组的开头添加一个或更多的元素，并返回新的长度。  
splice 从数组添加或删除项目 ，并返回被删除的项目  
sort 数组排序  
reverse 颠倒数组中元素的顺序

eg:  
我们想要修改数组的第二项

直接操作数组下标：list\[1\]=\{is：“222”，text：‘36366’\}

数组中的第二项虽然会改变，但是页面不会响应，所以不能用修改下标的方法来做。

如何处理呢？

list.splice(1,1,{
       is：“222”，text：‘36366’ })

splice从下标为1的元素开始处理，删除长度为1，添加`{is：“222”，text：‘36366’}`的元素  
  
**对象循环**

data(){ return{ userInfo:{ name:'Dell', age:'28', gender:'male' }
    }
    }

在模板中：

<div v-for ='(item,key,index) of ueserInfo'> { { item}}--{ { key}}--{ { index}} </div>

效果：  
![这里写图片描述][70 2]  
  
**对象修改值：**

list.userInfo.address = 'beijing'

会在列表添加成功，但是在页面不会显示。  
**1.可以直接改引用（数组也可以直接改引用）**  
![这里写图片描述][70 3]

**2.使用set 方法**：

类方法：Vue.set()和实例方法 vm.$set()

Vue.set(vm.useInfo,’address’,’beijing’)

这样数据和页面都会发生改变

vm.$set(vm.useInfo,’address’,’beijing’)

**数组上set方法：**

类方法：Vue.set()和实例方法 vm.$set()

Vue.set(vm.useInfo,1,5) 改变下标为1的元素，改成5.

这样的话在数组和页面都会更新了。

**总结：**

**改变数组有三种方法：**

① 通过数组方法，push、pop等七个

② 直接改变引用地址

③ set 方法(类方法：Vue.set()和实例方法 vm.$set())

**改变对象有两个方法：**

① 直接改变引用地址

② set方法(类方法：Vue.set()和实例方法 vm.$set())

[70]: /images/20220522/30ad718b8efe4e1bb5b25f6cc9020ae7.png
[70 1]: /images/20220522/4d494e7243314634a34f77ffbc02f60a.png
[70 2]: /images/20220522/10486159c5954d9aa03c4c66905a7caa.png
[70 3]: /images/20220522/bd003f72a2fe4f20a320da4838964cfc.png