Vue教程0206-Vue条件渲染

watchping

已于 2023-02-12 09:59:44 修改

阅读量87

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： vue.js javascript 前端

于 2023-02-11 16:38:05 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128985106

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

Vue条件渲染

1.指令v-show
- 1.1指令v-show的使用-对话框
- 1.2指令v-show的使用-动态显示按钮
2.指令v-if、v-else的使用
3.指令v-else-if的使用

1.指令v-show

1.1指令v-show的使用-对话框

控制一个元素的显示隐藏

<元素 v-show="条件表达式">

结果:

如果条件表达式执行结果为true，则当前元素显示——会去掉display:none
如果条件表达式执行结果为false，则当前元素隐藏——会自动将v-show替换为display:none

案例1-对话框的打开和关闭

设计一个页面，页面中有1个按钮A和1个对话框B（对话框里面有1个关闭按钮C），要求实现点击按钮A后，显示对话窗口B，点击对话窗口里面的关闭按钮C，则关闭对话窗口。

实现参考代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .dialog_window {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 300px;
            height: 200px;
            background-color: #fdb692;
            font-size: 24px;
            line-height: 30px;
        }
        .close_button {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>单击打开对话框按钮时，让对话框显示</h4>
        <button @click="onClickOpenDialog">打开对话框</button>
        <div class="dialog_window" v-show="isShow">
            <button class="close_button" @click="onClickCloseDialog">关闭对话框</button>
            <div>
                这里有很多对话框显示的内容，比如产品介绍 文本说明
                ...
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods: {
                onClickOpenDialog() {
                    this.isShow = true;
                },
                onClickCloseDialog() {
                    this.isShow = false;
                }
            }
        })
    </script>
</body>

点击进入官网文档

1.2指令v-show的使用-动态显示按钮

在分页操作时，用指令v-show实现上一页、下一页按钮的动态显示。要实现的页面需要实现:

当前第几页pno和共几页 pcount
每单击下一页按钮，pno+1
只有pno<pcount时，下一页按钮才显示！
每单击上一页按钮，pno-1
只有pno>1时，上一页按钮才显示！

案例
分页按钮动态显示，参考代码如下：

<body>
    <div id="app">
        <h2>上一页下一页按钮动态显示</h2>
        <div>
            <button v-show="pno >1" @click="onLast">上一页</button>
            <span>第{{pno}}页/共{{pcount}}页</span>
            <button v-show="pno<pcount" @click="onNext">下一页</button>
        </div>
    </div>
    <script>
         var vm = new Vue({
            el: "#app",
            data: {
                pno: 1,
                pcount: 5
            },
            methods: {
                onNext() {
                    this.pno++;
                },
                onLast() {
                    this.pno--;
                }
            }
        })
    </script>
</body>

2.指令v-if、v-else的使用

v-show如果控制两个元素二选一显示隐藏，必须把判断条件在每个元素上都重复写一遍，代码繁琐！控制两个元素二选一显示隐藏，可以用指令v-if、v-else。

<元素1 v-if="判断条件"/>
<元素2 v-else/>

渲染结果：

如果判断条件返回true，就显示第一个元素，删除第二个元素
如果判断条件返回false，就显示第二个元素，删除第一个元素

强调:

两个元素之间不能插入其他元素

比较v-show和v-if

v-show采用display:none 隐藏元素 -效率高，因为未改变DOM树结构
v-if 采用直接删除元素隐藏元素，可能会频繁修改DOM树-效率略低

案例
动态显示用户登录注册信息

设计页面，根据用户是否登录的不同状态显示不同的内容，如果用户登录，显示用户名等信息，隐藏注册按钮。如果用户没有登录，显示注册按钮。

实现参考代码如下：

<body>
  <div id="app">
    <div v-if="!isLogin">
      <a href="javascript:;" @click="onLogin">登录</a> | <a href="javascript:;">注册</a>
    </div>
    <div v-else>
      welcome dingding
      |
      <a href="javascript:;" @click="onLogout">注销</a>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        isLogin: false
      },
      methods: {
        onLogin() {
          this.isLogin = true;
        },
        onLogout() {
          this.isLogin = false;
        }
      }
    })
  </script>
</body>

参见官方文档
https://cn.vuejs.org/v2/guide/conditional.html#v-if

3.指令v-else-if的使用

控制多个元素多选一的显示或隐藏。

		<元素1 v-if="条件1">
        <元素2 v-else-if="条件2">
            ...
        <元素n v-else>

强调: 多个元素之间不能插入其他元素

案例
用v-else-if指令实现根据不同的PM25值，显示不同的表情图片
参考代码如下：

<body>
  <div id="app">
    <h1>空气净化器</h1>
    <h2>{{pm25}}</h2>
    <img v-if="pm25<100" src="../img/1.png">
    <img v-else-if="pm25<200" src="../img/2.png">
    <img v-else-if="pm25<300" src="../img/3.png">
    <img v-else src="../img/4.png">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pm25: 180
      },
      created() {
        setInterval(() => {
          let pm25 = Math.random() * 400;
          this.pm25 = Math.round(pm25);
        }, 2000);
      },
    });    
  </script>
</body>