v-if和v-show的区别

时间：2020-02-17 21:50:47 阅读：68 评论：0 收藏：0 [点我收藏+]

理论知识

相同点
- 都用在vue模板中，用于控制元素是否向用户显示。
- 其值都是boolean类型的表达式
不同点
- v-if类似if语句，可以接连多个v-if-else语句，控制多个dom节点。v-show只控制一个dom节点。
- v-if控制的元素不显示时，则不会渲染到页面，即在f12下的elements下无该元素。 v-show即使不显示，也会渲染到页面，即在调试页面的elements中可以看到。

实践

<body>
    <div id="app">
        <div v-if='a>100'>优秀</div>
        <div v-else-if='a >=80 && a<=100'>良好</div>
        <div v-else='a<70'>差</div>
        <div v-show='s'>测试v-show</div>
        <div>{{ a =>80 }}</div>
    </div>
    <script type="text/javascript">
        Vue.config.keyCodes.aaa= 65
        var app = new Vue({
            el: '#app',
            data:{
                s:false,
                a:60,
            }
        })

在写判断语句时，大于等于和小于等于中，等号始终在后面，即 ‘>=‘和‘<=‘。而 ‘=>‘是箭头函数。

v-if和v-show的区别

原文：https://www.cnblogs.com/guojuboke/p/12323515.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)