编辑
2023-04-04
VUE3
0
请注意,本文编写于 577 天前,最后修改于 569 天前,其中某些信息可能已经过时。

目录

条件渲染
v-if
说明
EG
v-else
说明
EG
v-else-if
说明
EG
v-show
说明
EG
v-if和v-show的区别
列表渲染
特点

条件渲染

v-if

说明

用于条件性的渲染一块内容,只有在v-if表达式的值返回为真时才会渲染

EG

vue
<div v-if='false'></div>

v-else

说明

v-else必须跟在v-ifv-else-if后才可以被识别,相当于v-ifv-else-ifelse区块

EG

vue
<div v-if='false'></div> <div v-else></div>

v-else-if

说明

必须跟在v-if后才可以被识别

EG

vue
<div v-if='false'></div> <div v-else-if='true'></div>

v-show

说明

同样是根据表达式的值选择性的渲染一块内容

EG

vue
<div v-show='false'></div>

v-if和v-show的区别

  1. v-if为false时是整个dom节点都不在,初始为false时不会做任何事,只有在切换为true时对应的区块内的事件监听器和子组件都会被销毁与重建;而v-show无论初始条件如何都会渲染,只是通过cssdisplay属性设置隐藏
  2. v-if有更高的切换消耗,v-show具有更高的初始渲染消耗

列表渲染

特点

Vue可以侦听响应式数组的变更方法[指的是会对原数组产生变更的方法],包括以下几种:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

对于不可变方法[如filter()concat() 和 slice()],可先将原数组采用ref包裹,然后直接对其赋值替换整个数组

ts
let userinfos1 = ref([1,2,3]) const changeuserinfos1 = ()=>{ userinfos1.value=[3,4,5] }

在计算属性中对于数组的变更方法不能直接使用,需要先创建一个基于原数组的复制数组,再对其进行操作

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!