前端小记录---v-if一些用法与v-show区别

最新推荐文章于 2024-07-19 10:04:44 发布

这Leslie_Lau

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量426

点赞数 1

分类专栏：前端技术文章标签： vue javascript html 经验分享恰饭

本文链接：https://blog.csdn.net/Jokeronee/article/details/108683556

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在看vue相关的知识，看到各个指令，这一篇简单记录一下v-if的一些常用用法以及它和v-show的区别。

文章目录

语法:

v-if="布尔值"
v-show="布尔值"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>

    <div id="app">

		<input type="button" value="点击改变status值" @click="status = !status"/><br/>
        <span v-if="status"><h2>status=true,v-if</h2></span><br/>
        <span v-show="status"><h2>status=true,v-show</h2></span><br/>
    </div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            status:true
        }
    })
</script>
</html>

描述:

在vue实例中，我们增加一个数据模型status，值为true。然后定义一个名为app的html模版。里面直接比对v-if与v-show的区别，再增加个按钮，通过js表达式status = !status改变布尔值的值。

效果:

值为true:
在这里插入图片描述
点击按钮，改变，使其值为false:

在这里插入图片描述

两者区别

上面我们看到两个指令实现效果没有任何区别，但是当我们打开控制台：

在这里插入图片描述
可以看到，当布尔值为false时，使用v-if的标记块根本不渲染。而使用v-show的标记块渲染了，只不过加了个不显示的css样式。所以从性能效率上来看，平时会使用前者。

结合v-for使用v-if

直接上码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>

    <div id="app">

        <ul>
            <li v-for="(person,index) in array" v-if="person.gender == 'female'">{{index+1}}.{{person.name}}-{{person.age}}-{{person.gender}}</li>
        </ul>

    </div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            array:[
                {name:"leslie",age:18,gender:"male"},
                {name:"lion",age:18,gender:"female"},
                {name:"lily",age:50,gender:"female"}
            ]
        }
    })
</script>
</html>

描述:

这里在vue实例中定义了一个数组，里面装着三个对象。在html模版中的<li>标签内结合两者进行遍历数组，选出gender为female的对象并输出至屏幕上。

效果图:

在这里插入图片描述

v-if、v-else-if与v-else

这三个指令也经常会用到，顾名思义就是多层判断了。

上码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>

    <div id="app">

        <button @click="random = Math.random()">点击生成随机数</button><span>{{random}}</span>

        <h2 v-if="random > 0.75">random大于0.75</h2>
        <h2 v-else-if="random > 0.5">random大于0.5</h2>
        <h2 v-else-if="random > 0.25">random大于0.25</h2>
        <h2 v-else>random大于0</h2>

    </div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            random:1
        }
    })
</script>
</html>