Vue-条件渲染（初识vue渲染）

码农白衣2024-04-23 4:09

目录

一、Vue条件渲染-介绍

1.概念

2.特点

3.功能

4.好处

5.应用

二、Vue条件渲染-使用

1.初识渲染

2.条件v-if的使用

3.条件v-if-else的使用

4.条件v-else-if使用

5.template元素使用

6.条件渲染-阶段案例

7.条件v-show

三、Vue条件渲染-实例

1.权限管理系统

2.动态表单验证

3.动态路由权限控制

四、总结

一、Vue条件渲染-介绍

Vue 的条件渲染是指根据数据的不同状态来动态地显示或隐藏 DOM 元素的一种技术。通过条件渲染，你可以根据特定的条件决定是否渲染特定的 DOM 元素，以实现更灵活、交互性更强的用户界面。

1.概念

条件渲染是 Vue.js 中的一项核心特性，它允许你基于应用的状态来动态地显示或隐藏 DOM 元素。通过在模板中使用 Vue 的指令，你可以轻松地根据数据的不同值来决定 DOM 元素是否被渲染到页面上。

2.特点

  • 灵活性：条件渲染使得页面元素的显示与否可以根据数据的变化而动态调整，从而实现灵活的交互效果。
  • 简洁性：通过 Vue 提供的指令，实现条件渲染的代码通常比传统的 JavaScript 操作 DOM 更为简洁明了。
  • 响应式：Vue 的条件渲染是响应式的，即当数据发生变化时，页面会自动重新渲染以反映最新的状态。

3.功能

  • v-if 指令：根据表达式的值的真假来决定是否渲染元素。
  • v-else 指令：在 v-if 指令的后面使用，表示前面的条件不满足时执行的渲染。
  • v-else-if 指令：用于在 v-if 指令的后面添加额外的条件。
  • v-show 指令 ：根据表达式的值的真假来切换元素的 CSS display 属性。

4.好处

  • 交互性增强：条件渲染使得页面在不同的情况下可以展现不同的内容，增强了用户与页面的交互性。
  • 数据驱动：Vue 的条件渲染是基于数据的状态来决定的，使得页面的渲染更加符合数据驱动的原则。
  • 简化逻辑：通过条件渲染，可以将一些复杂的逻辑判断移到模板层，使得代码更加清晰简洁。

5.应用

条件渲染在 Vue 中的应用非常广泛，常见的场景包括：

  • 根据用户的登录状态显示不同的导航菜单。
  • 根据数据列表是否为空显示不同的提示信息。
  • 根据用户的权限动态显示或隐藏某些功能按钮。
  • 根据表单输入的内容验证结果来显示错误提示信息。

总之，条件渲染是 Vue.js 中非常重要的一项特性，它使得开发者能够根据数据的变化来动态地控制页面的显示，从而实现更加灵活、交互性更强的用户界面。

二、Vue条件渲染-使用

1.初识渲染

完成以下需求demo，请求数据并展示在页面上

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--模版语法-->
    <div id="app">
        <ul v-if="names.length>0">
            <li v-for="item in names">{{item}}</li>
        </ul>
        <h2 v-else>当前names没有数据，请求获取数据后展示</h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    // names: ["abc", "cba", "nba"]
                    names:[]
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

2.条件v-if的使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-if = "条件" -->
        <div class="info" v-if="Object.keys(info).length">
            <h2>个人信息</h2>
            <ul>
                <li>姓名：{{info.name}}</li>
                <li>年龄：{{info.age}}</li>
            </ul>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data() {
                return {
                    info: {name:"why",age:18}
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

3.条件v-if-else的使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-if = "条件" -->
        <div class="info" v-if="Object.keys(info).length">
            <h2>个人信息</h2>
            <ul>
                <li>姓名：{{info.name}}</li>
                <li>年龄：{{info.age}}</li>
            </ul>
        </div>

        <!-- v-else -->
        <div v-else>
            <h2>没有输入个人信息</h2>
            <p>请输入个人信息后，在进行展示</p>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data() {
                return {
                    info: {name:"why",age:18}
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

4.条件v-else-if使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 v-if="score>90">优秀</h1>
        <h2 v-else-if="score>80">良好</h2>
        <h3 v-else-if="score>=60">及格</h3>
        <h4 v-else>不及格</h4>

    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    score: 88
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

5.template元素使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-if = "条件" -->
        <template v-if="Object.keys(info).length">
            <h2>个人信息</h2>
            <ul>
                <li>姓名：{{info.name}}</li>
                <li>年龄：{{info.age}}</li>
            </ul>
        </template>

        <!-- v-else -->
        <template v-else>
            <h2>没有输入个人信息</h2>
            <p>请输入个人信息后，在进行展示</p>
        </template>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data() {
                return {
                    info: {name:"why",age:18}
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

6.条件渲染-阶段案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click = "toggle">切换</button>
        </div>
        <template v-if = "isShowCode">
            <img src="https://img.xjishu.com/img/zl/2017/10/212257159687020.gif" alt="">
        </template>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    isShowCode:true
                }
            },
            methods:{
                toggle(){
                    this.isShowCode = !this.isShowCode
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

7.条件v-show

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click = "toggle">切换</button>
        </div>
        <div v-show = "isShowCode">
            <img src="https://img.xjishu.com/img/zl/2017/10/212257159687020.gif" alt="">
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    isShowCode:true
                }
            },
            methods:{
                toggle(){
                    this.isShowCode = !this.isShowCode
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

三、Vue条件渲染-实例

1.权限管理系统

在一个权限管理系统中，不同的用户可能拥有不同的权限级别。根据用户的权限级别，页面上的功能按钮和菜单项应该显示或隐藏。例如，管理员用户可能能够看到所有的功能按钮，而普通用户只能看到部分功能按钮。这种情况下，你可以根据用户的权限级别来决定是否渲染特定的功能按钮和菜单项。

html 复制代码 
<template>
  <div>
    <button v-if="userRole === 'admin'">删除用户</button>
    <button v-if="userRole === 'admin' || userRole === 'editor'">编辑文章</button>
    <button v-if="userRole === 'admin' || userRole === 'editor' || userRole === 'viewer'">查看文章</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userRole: 'admin' // 可以从后端获取当前用户的权限级别
    };
  }
};
</script>

2.动态表单验证

在一个表单页面中，根据用户输入的内容动态地显示或隐藏错误提示信息。例如，当用户输入的邮箱格式不正确时，显示邮箱格式错误的提示信息；当用户输入的密码不符合要求时，显示密码格式错误的提示信息。

html 复制代码 
<template>
  <form @submit.prevent="submitForm">
    <label>Email:</label>
    <input type="email" v-model="email">
    <p v-if="!isValidEmail">邮箱格式错误</p>
    
    <label>Password:</label>
    <input type="password" v-model="password">
    <p v-if="!isValidPassword">密码长度应在6-12位之间</p>
    
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  computed: {
    isValidEmail() {
      // 检查邮箱格式是否正确
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email);
    },
    isValidPassword() {
      // 检查密码长度是否在6-12位之间
      return this.password.length >= 6 && this.password.length <= 12;
    }
  },
  methods: {
    submitForm() {
      // 提交表单逻辑
    }
  }
};
</script>

3.动态路由权限控制

在一个基于 Vue Router 的单页面应用中，根据用户的权限动态地控制路由访问权限。例如，某些页面只能被管理员用户访问，而普通用户不能访问。这时，你可以在路由配置中结合条件渲染来实现权限控制。

javascript 复制代码 
const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: {
      requiresAdmin: true // 标记需要管理员权限访问的路由
    }
  },
  {
    path: '/profile',
    component: ProfilePage
  },
  {
    path: '/login',
    component: LoginPage
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  const isLoggedIn = checkUserLoggedIn(); // 检查用户是否已登录
  const isAdmin = checkUserAdmin(); // 检查用户是否是管理员
  
  if (to.meta.requiresAdmin && !isAdmin) {
    // 如果用户不是管理员且当前路由需要管理员权限，则跳转到登录页或其他页面
    next('/login');
  } else if (to.path === '/login' && isLoggedIn) {
    // 如果用户已登录且尝试访问登录页，则跳转到个人资料页或其他页面
    next('/profile');
  } else {
    // 其他情况下继续路由跳转
    next();
  }
});

function checkUserLoggedIn() {
  // 检查用户是否已登录的逻辑
}

function checkUserAdmin() {
  // 检查用户是否是管理员的逻辑
}

四、总结

Vue 条件渲染是指根据特定条件动态地显示或隐藏页面上的元素，从而实现灵活的页面交互效果。在 Vue 中，条件渲染通常通过以下几种方式实现：

v-if 指令 ： v-if 指令根据条件的真假来决定是否渲染 DOM 元素。当条件为真时，元素被渲染；当条件为假时，元素不被渲染。

html 复制代码 
<div v-if="isTrue">条件为真时显示的内容</div>

v-else 指令 ： v-else 指令与 v-if 搭配使用，用于表示在前一个 v-if 条件不满足时渲染的内容。

html 复制代码 
<div v-if="isTrue">条件为真时显示的内容</div>
<div v-else>条件为假时显示的内容</div>

v-else-if 指令 ： v-else-if 指令与 v-if 和 v-else 搭配使用，用于表示在前一个 v-if 条件不满足，但某个额外条件满足时渲染的内容。

html 复制代码 
<div v-if="type === 'A'">类型 A 的内容</div>
<div v-else-if="type === 'B'">类型 B 的内容</div>
<div v-else>其他类型的内容</div>

v-show 指令 ： v-show 指令根据条件的真假来动态地切换元素的显示与隐藏，与 v-if 不同的是，使用 v-show 时，元素始终会被渲染到 DOM 中，只是通过 CSS 控制其显示与隐藏。

html 复制代码 
<div v-show="isVisible">根据条件动态显示或隐藏的内容</div>

这些指令提供了在 Vue 应用中实现条件渲染的灵活方式，开发者可以根据具体的需求选择适合的指令来实现不同的交互效果。通过条件渲染，可以根据用户的操作或数据状态动态地调整页面的呈现，从而提升用户体验。

相关推荐
hackeroink25 分钟前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者2 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-2 小时前
验证码机制
前端·后端
燃先生._.3 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235244 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240255 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人6 小时前
前端知识补充—CSS
前端·css
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程