后端前行Vue之路(四):条件渲染v-if和v-show

1.概述

随着前端开发的不断发展,动态渲染页面成为了常见的需求。Vue.js 作为一款流行的前端框架,提供了多种方式来实现条件渲染,所谓条件渲染就是一种根据数据的值来动态决定是否渲染特定的元素或组件的方式。Vue 实现条件渲染的指令包括 v-ifv-else-ifv-elsev-show 等指令。本文将介绍这些指令的使用方法和适用场景,并给出一些最佳实践建议。

2.v-if

v-if 指令用于根据表达式的值来决定是否渲染特定的元素或组件。它会根据表达式的真假动态地销毁或创建元素。例如:

xml 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2 v-if="isReal">isReal为true, {{msg}}</h2>
      <h2 v-if="!isReal">isReal为false, {{msg}}<h2>
      <h2 v-if="n===1">n等于1, {{msg}}</h2>
    </div>
  </body>
​
  <script type="text/javascript">
    Vue.config.productionTip = false
​
    const vm = new Vue({
      el:'#root',
      data:{
        isReal:true,
        n:1,
        msg:"我显示出来了"
      }
    })
  </script>
</html>

3. v-else-if和v-else

v-else-if 指令用于在 v-if 指令的后面添加一个额外的条件,如果之前的条件不满足,则检查这个条件;如果满足,则渲染该元素或组件。v-else 指令用于在 v-ifv-else-if 的后面添加一个默认条件,如果之前的条件都不满足,则渲染该元素或组件。

ini 复制代码
      <h2 v-if="n===1">n等于1, {{msg}}</h2>
      <h2 v-else-if="n===2">n等于2, {{msg}}</h2>
      <h2 v-else="n===3">n等于, {{msg}}</h2>

4.v-show

v-show 指令与 v-if 类似,用于根据表达式的值来决定是否渲染元素或组件。不同的是,v-show 只是简单地切换元素的 CSS display 属性,而不是真正地销毁和重新创建元素。

xml 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2 v-if="isReal">isReal为true, {{msg}}</h2>
      <h2 v-if="!isReal">isReal为false<>
      <h2 v-if="n===1">n等于1, {{msg}}</h2>
      <h2 v-else-if="n===2">n等于2, {{msg}}</h2>
      <h2 v-else="n===3">n等于, {{msg}}</h2>
      <h2 v-show="isShow">isShow为true,{{msg}}</h2>
    </div>
  </body>
​
  <script type="text/javascript">
    Vue.config.productionTip = false
​
    const vm = new Vue({
      el:'#root',
      data:{
        isReal:true,
        isShow:false,
        n:2,
        msg:"我显示出来了"
      }
    })
  </script>
</html>

在谷歌浏览器打开该html文件,开启开发者工具查看你会发现:

可以得出如下结论:

  • 当需要在不同条件下选择性地渲染元素或组件时,可以使用 v-ifv-else-ifv-else
  • 当需要频繁地切换元素的显示和隐藏时,可以使用 v-show,因为它只是切换 CSS 属性,性能比较高;
  • 如果条件不太频繁变化,可以使用 v-if,因为它会根据条件的真假销毁或创建元素,减少页面的渲染压力

5. 在

相关推荐
90后的晨仔11 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗11 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥11 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial11 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front12 小时前
面试是一门学问
前端·面试
90后的晨仔12 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔12 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js
90后的晨仔12 小时前
Vue 异步组件(defineAsyncComponent)全指南:写给新手的小白实战笔记
前端·vue.js
聪明的笨猪猪12 小时前
Java Spring “AOP” 面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
木易 士心12 小时前
Vue 与 React 深度对比:底层原理、开发体验与实际性能
前端·javascript·vue.js