vue条件渲染

最新推荐文章于 2023-07-10 17:13:44 发布

Tiansheng_Lai

最新推荐文章于 2023-07-10 17:13:44 发布

阅读量234

点赞数 1

分类专栏：前端文章标签： vue基础

本文链接：https://blog.csdn.net/kslh2898/article/details/89072405

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue条件渲染例一

v-if v-else-if v-else

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件渲染</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>
    <div id="app">
        <div v-if="count>0">
            判断1： count 大于0，count的值是:{{count}}
        </div>
        <div v-else-if="count<0 && count>-5">
            判断2： count的值是:{{count}}
        </div>
        <div v-else>
            判断3： count的值是: {{count}}
        </div>
        {{msg}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue ！',
                count: 0,
            },
        })
    </script>
</body>

</html>

当count值为0时，符合判断3，调用判断3的语句输出

在这里插入图片描述
当count>0时，调用判断1
（开发者模式下控制台输入app.count=3改变当前count的值）

当count<0 且 count>-5调用判断2

假如修改判断一的条件为小于0，此时判断1和判断2在count小于0（且大于-5）的时候能同时满足,通过给定一个【-5,0】的值，比如-2，验证它的执行情况：

<body>
    <div id="app">
        <div v-if="count<0">
            判断1： count 小于0，count的值是:{{count}}
        </div>
        <div v-else-if="count<0 && count>-5">
            判断2： count的值是:{{count}}
        </div>
        <div v-else>
            判断3： count的值是: {{count}}
        </div>
        {{msg}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue ！',
                count: 0,
            },
        })
    </script>
</body>

在这里插入图片描述
从结果看出，只调用了判断1，说明它的运行情况是按照代码块顺序来去进行的，当前面的代码满足条件，则执行该部分的代码，然后结束，并不会执行后面的代码，只有当前面代码不满足条件时，会逐一执行后面的条件代码。

v-show

 <div id="app">
        <div v-if="count<0">
            判断1： count 小于0，count的值是:{{count}}
        </div>
        <div v-else-if="count<0 && count>-5">
            判断2： count的值是:{{count}}
        </div>
        <div v-else>
            判断3： count的值是: {{count}}
        </div>
        <div v-show="count==-1">show:{{count}} </div>
        {{msg}}
    </div>

在这里插入图片描述

Tiansheng_Lai

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue条件渲染

Vue条件渲染例一v-if v-else-if v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
复制链接

扫一扫