【Vue 从入门到实战进阶式掌握完整知识体系】006

2025-07-25 09:10:46

【Vue 从入门到实战进阶式掌握完整知识体系】006 6、条件渲染v-if基本使用代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi

【Vue 从入门到实战进阶式掌握完整知识体系】006

6、条件渲染

v-if基本使用

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        show: true
      }
    },
    // 我们使用 v-if 与 v-show 两种方式来实现条件渲染
    template: `
        <div v-if='show'>
            {{ message }}
        </div>
        <div v-show='show'>
            {{ message }}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

show 为 true的时候

image-2021061219510251.png

show 为 false 的时候

image-20210612195684.png

使用场景

v-if：用在不经常调整显示状态的标签上；

v-show：用来经常调整显示状态的标签上；

使用v-else

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        msg: 'Hello V-ELSE!',
        show: false
      }
    },
    // 我们使用 v-if 与 v-show 两种方式来实现条件渲染
    template: `
        <div v-if='show'>
            {{ message }}
        </div>
        <div v-else>
            {{ msg }}
        </div>
        <div v-show='show'>
            {{ message }}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061219580866.png

使用v-else-if

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        msg: 'Hello V-ELSE!',
        msg2: 'HELLO V-ELSE-IF',
        show: false,
        show2: true
      }
    },
    // 我们使用 v-if 与 v-show 两种方式来实现条件渲染
    template: `
        <div v-if='show'>
            {{ message }}
        </div>
        <div v-else-if="show2">
            {{ msg2 }}
        </div>
        <div v-else>
            {{ msg }}
        </div>
        <div v-show='show'>
            {{ message }}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061220022075.png本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除渲染vue基础入门语法

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200293.html

本站网友珠宝饰品	5分钟前发表
show
本站网友壮阳最好的四大中成药	26分钟前发表
msg
本站网友复合地板保养	20分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { message
本站网友逼仄	20分钟前发表
'Hello V-ELSE!'
本站网友 html源代码	17分钟前发表
原始发表：2025-01-06

【Vue 从入门到实战进阶式掌握完整知识体系】006