vue的v-bind指令动态绑定class

3月

本文最后更新于2020年03月14日，已经过了1770天没有更新，若内容或图片失效，请留言反馈

在前几篇文章中我们使用的指令的主要作用时将值插入到模板语法中。但是在开发中除了内容需要动态来决定，某些属性也需要动态来绑定。
比如：
动态绑定a标签的href属性
动态绑定img标签的src属性
...
这个时候我们可以使用v-bind属性

作用：动态绑定属性
语法糖：：

基本使用
在data中定义属性imgURL和aHref保存图片地址和链接地址，并将他们的值分别与img的src属性和a的href属性绑定。

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    
    <div id="app">
        <!-- <img v-bind:src={{imgURL}} alt="">  
        错误的写法这里不可以使用mustache语法 -->
        
        <img v-bind:src="imgURL" alt="">
        <a v-bind:href="aHref">百度一下</a>
        
        <!-- 简写（语法糖）
        <img :src="imgUrl" alt="">
        <a :href="aHref">百度一下</a> -->
    </div>
        
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",  
            data:{
                imgURL: "http://www.xiufan.xn--ses554g/imgs/vue/vue.jpeg",
                aHref: "http://www.baidu.com"
            }
        })
    </script>
</body>
</html>

v-bind对象语法
格式

{{message}}
当boolean为true的时候，为对应的标签添加boolean所对应的类名。
实列：
在data中定义boolean类型的属性isActive和isOther，当isActive为true时，为h1添加active此时字体变红色，当isActive为false时，为h1移除active此时字体变回黑色，其它同理。

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div class="app">
            <!-- 方法一 -->
        <h2 v-bind:class="{active:isActive,other:isOther}">{{message}}</h2>

            <!-- 方法二 -->
            <h2 v-bind:class="getClass()">{{message}}</h2>

        <!-- 点击按钮改变文字颜色 -->
        <button @click="changeColor">改变文字颜色</button>
    </div>
    
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        const test = new Vue({
            el:".app",
            data:{
                message:"this is vue",
                isActive:true,
                isOther:false
            },
            methods:{
                // 按钮事件
                changeColor:function(){
                    this.isActive = !this.isActive
                },

                // 返回所有class名称
                getClass:function(){
                    return {active:this.isActive,other:this.isOther}
                }
            }
        })

    </script>
</body>
</html>

实列中方式一是使用普通方式绑定。
方式二是绑定方法返回的class名称，适用于绑定多个class的情况。

数组语法（使用较少，了解即可）

text 代码:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .active{
        color: red;
    }
</style>
</head>
<body>
<!-- 此方法了解即可 -->
<div id="app">
    <h2 v-bind:class="[active,other]">{{message}}</h2>
</div>
    
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
    const app = new Vue({
        el:"#app", 
        data:{ 
            message:"this is vue",
            active:"active",
            other:"other"
        },

        methods:{
                // 返回所有class名称
                getClass:function(){
                    return [this.isActive,this.isOther]
                }
            }
    })
</script>
 </body>
</html>

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢