07-Vue之本地应用v-show/v-if指令

最新推荐文章于 2024-01-31 19:12:46 发布

爱学习de测试小白

最新推荐文章于 2024-01-31 19:12:46 发布

阅读量145

点赞数

分类专栏： # Vue 文章标签： vue

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/112295327

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

1. v-show指令

2. v-if 指令

3. 总结

1. v-show指令

作用：根据表达值的真假，切换元素的显示和隐藏
本质：修改元素的display，实现显示隐藏
说明：指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id='app'>
        <!-- 直接写true/false -->
        <!-- <img src="./test_img.jpg" alt="" v-show='true'> -->

        <!-- 动态修改 -->
        <input type="button" value="展示切换" @click='changeIsShow'>
        <img src="./test_img.jpg" alt="" v-show='isShow'>

        <!-- 表达式 -->
        <input type="button" value="累加年龄" @click='addAge'>
        <img src="./test_img.jpg" alt="" v-show='age>26'>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: false,
                age: 24
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow
                },
                addAge: function () {
                    this.age ++;
                }
            }

        })
    </script>
</body>

</html>

2. v-if 指令

作用：根据表达式的真假切换元素的显示状态
本质：通过操纵dom元素来切换显示状态
说明：表达式的值为true，元素存在于dom树中，为false，从dom树中移除

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <input type="button" @click='changeShow' value="切换显示">
        <!-- 直接操作Dom树，性能消耗大 -->
        <p v-if='isShow'>大家好，我是测试小白！</p>

        <!-- 控制属性display的值，操作频繁时建议使用 -->
        <p v-show='isShow'>大家好，我是测试小白！</p>

        <!-- 表达式 -->
        <input type="button" value="多点几下就脱单了" @click='changeAge'>
        <h2 v-if='age>28'>恭喜你脱单了，哈哈哈哈！</h2>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: false,
                age:26
    
            },
            methods: {
                changeShow: function () {
                    this.isShow = !this.isShow
                },
                changeAge:function(){
                    this.age++;
                }
            }

        })
    </script>

</body>

</html>

3. 总结

v-show和v-if根据表达式的真假切换元素的显示状态
v-show修改display；v-if操作Dom树，性能消耗大
元素频繁操作显示隐藏时，建议使用v-show

爱学习de测试小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
07-Vue之本地应用v-show/v-if指令

1. v-show指令作用：根据表达值的真假，切换元素的显示和隐藏原理：修改元素的display，实现显示隐藏说明：指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
复制链接

扫一扫