vue基础（三）之v-if，v-show

最新推荐文章于 2024-05-25 21:36:40 发布

无声的雾

最新推荐文章于 2024-05-25 21:36:40 发布

阅读量919

点赞数

分类专栏：前端文章标签： vue java js

本文链接：https://blog.csdn.net/wb785074651/article/details/105873609

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先给大家说一下v-if和v-show的区别

v-if就是当判断为false的时候，直接不显示，而v-show当判断为false的时候，是显示display:none，我们来看下效果：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="反选" @click="show=!show"/>
    <br/>
    <span v-if="show">v-if显示啦{{show}}</span>
    <br/>
    <span v-show="show">v-show显示啦{{show}}</span>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:true
        }
    })

</script>
</html>

这里就可以看到直接v-if就不显示任何东西，而v-show就显示display:none。

然后就是v-if，v-else-if， v-else的使用方法。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<input type="button" value="反选" @click="show=!show"/>-->
    <input type="button" value="生成随机数" @click="random=Math.random()*20"/>
    <br/>
    <span v-if="random>10">这个数字为：{{random}}，大于10</span>
    <span v-else-if="random>5">这个数字为：{{random}}，大于5小于10</span>
    <span v-else="random>0">这个数字为：{{random}}，大于0小于5</span>
    <br/>
    <!--<span v-show="show">v-show显示啦{{show}}</span>-->
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:true,
            random:0
        }
    })

</script>
</html>

这里要注意这个v-if后面如果写了v-else-if的话，中间不能插入其他东西，否则就无法判定这两个条件是相关的了。

最后v-if和v-for一起使用的时候，是先执行v-for的循环，然后在每个循环中，使用v-if判断条件的。

无声的雾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础（三）之v-if，v-show

首先给大家说一下v-if和v-show的区别v-if就是当判断为false的时候，直接不显示，而v-show当判断为false的时候，是显示display:none，我们来看下效果：<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> ...
复制链接

扫一扫