微信二维码
微博二维码
qq号二维码

重学Vue3 - 模板语法 - (5)

王伟平 2022.08.02 1180人浏览
重学Vue3 - 模板语法 - (5)

条件渲染

在某些情况下,我们需要根据当前的条件决定某些元素或组件是否渲染,此时就可以使用条件渲染

<div id="app">   <div v-if="users.length > 1">有多个嘉宾</div>   <div v-else-if="users.length === 1">只有一个嘉宾</div>   <div v-else>没有嘉宾</div> </div> 复制代码

v-if 的渲染是惰性

  • 当条件为false时,其判断的内容完全不会被渲染或者会被销毁掉

  • 当条件为true时,才会真正渲染条件块中的内容

v-show

v-if 和 v-show 在功能上都是一致的, 都是根据一个条件决定是否显示元素或者组件

但是对于v-if, 当条件为false时,其对应的元素压根不会被渲染到DOM中

v-show元素无论是否需要显示到浏览器上,它的DOM实际都是有存在的,只是通过CSS的display属性来进行切换

所以对于需要在显示和隐藏之间频繁的切换的元素,推荐使用v-show

v-show是通过CSS的display属性来决定元素是否显示的,所以

  1. v-show是不支持template的

  2. v-show不可以和v-else一起使用

列表渲染

在真实开发中,我们往往会从服务器拿到一组数据,并且需要对其进行渲染

这个时候我们可以使用v-for来完成,v-for类似于JavaScript的for循环,可以用于遍历一组数据

v-for的基本格式是 "(item, index) in 数组"

  • 数组通常是来自data或者prop,也可以是其他方式

  • item是我们给每项元素起的一个别名,可以自定义设置

转自稀土掘金

分享到:
天津UI设计培训-CleanPNG免抠素材网站
  • 2020.11.30
  • 学会这些面试回答,0基础也能进组做剪辑运营
  • 2025.05.28