Vue03_Vue基本指令2/3——显示切换、属性绑定（v-show/v-if/v-bind）

最新推荐文章于 2025-02-21 01:57:33 发布

ParadoxLin

最新推荐文章于 2025-02-21 01:57:33 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/linxwx/article/details/113789640

版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue中的v-show和v-if指令，用于根据表达式控制元素的显示与隐藏，分析了两者在DOM操作上的区别。接着详细讲解了v-bind指令，用于动态绑定属性，特别是重点探讨了动态绑定class和style的对象及数组语法，包括应用场景和注意事项。同时，提供了B站Vue教程的相应部分作为学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、v-show

根据表达式的真假，切换元素的显示和隐藏

<body>
    <div id="app">
        <img src="../pictures/A-girl.jpg" alt="test" v-show="isShow">
        <input type="button" value="改变布尔值" @click=changeTrue>
        <img src="../pictures/A-boy.jpg" alt="test" v-show="age > 18">
        <input type="button" value="年龄-1，当前19" @click=changeAge>
    </div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:19,
        },
        methods:{
            changeTrue:function(){
                this.isShow = !this.isShow;
            },
            changeAge:function(){
                this.age--;
            },
        }
    })
</script>
</body>

二、v-if

根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）
使用与v-show类似，区别：
- v-show实际上是将元素的display:none，
- v-if则是直接将元素从DOM树中移除；
- 频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)，
- 不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）；
v-else: 可以用 v-else 指令给 v-if 添加一个 “else” 块：

<div id="app">
    <div v-if="isShow">Show</div>
    <div v-else>Not Show</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>

v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用：

<body>
    <div class="date">
        <div v-if="day==1">今天是周一</div>
        <div v-else-if="day==2">今天是周二</div>
        <div v-else-if="day==3">今天是周三</div>
        <div v-else-if="day==4">今天是周四</div>
        <div v-else-if="day==5">今天是周五</div>
        <div v-else-if="day==6">今天是周六</div>
        <div v-else-if="day==7">今天是周日</div>
        <div v-else>格式错误！</div>
    </div>
</body>

<script>
    var app = new Vue({
        el:".date",
        data:{
            day:new Date().getDay()//获取"日"
        }
    })
</script>

注：

一般来说，涉及到多重条件判断，不会采用这种结构，可以定义一个计算属性computed：

在这里插入图片描述

涉及到两个元素时可以使用v-if、v-else：

在这里插入图片描述

三、v-bind

作用、为元素绑定属性
写法、v-bind: 属性名，简写 : 属性名
例：

<body>
    <div id="app">
        <img :src="imgSrc" alt="test" :title="imgTitle">
        <img :src="imgSrc" alt="test" :title="imgTitle">
    </div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc: "http://gmis.aust.edu.cn/pyxx/images/loginlogo.png",
            imgTitle: "我是tiltle",
        },
        methods:{
            
        }
    })
</script>
</body>

也可绑定元素的class（常用在active）
例：

<body>
    <div id="app">
        <img :src="imgSrc" alt="test" :title="imgTitle"
        :class="isActive?'active':''" @click="toggleActive">
        <!-- 上面使用三元表达式，下面为对象的形式 -->
        <img :src="imgSrc" alt="test" :title="imgTitle"
        :class="{active:isActive}" @click="toggleActive">
    </div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc: "http://gmis.aust.edu.cn/pyxx/images/loginlogo.png",
            imgTitle: "我是tiltle",
            isActive:false,
        },
        methods:{
            toggleActive:function(){
                this.isActive = !this.isActive;
            }
        }
    })
</script>
</body>