返回 导航

Vue.js

hangge.com

Vue.js - v-bind指令使用详解（绑定class、style、动态绑定属性、绑定对象）

作者：hangge | 2026-01-23 16:33
    v-bind 是 Vue 中最常用的指令之一，用于把组件实例的数据绑定到 DOM 属性或组件的 props 上。常见场景包括动态设置 class、style、src、disabled，或把父组件的值传给子组件的 props。下面我将通过样例演示 v-bind 指令的使用。

一、绑定基本属性

1，基本介绍

    在很多时候，元素的属性是动态的，比如 <a> 元素的 href 属性、<img> 元素的 src 属性等。通常需要动态插入值，这时可以使用 v-bind 指令来绑定这些属性。

2，使用样例

（1）下面样例在 data 属性中定义了 imgUrl 和 link 变量，imgUrl 存放的是一张图片的路径，link 存放的是一个网址。首先使用 v-bind 指令（: 是 v-bind 的简写）把 link 变量绑定到 <a> 元素的 href 属性上。接着，把 imgUrl 变量绑定到 <img> 元素的 src 属性上。 
<template>
    <div class="my-component">
        <!-- 1.v-bind的基本使用 -->
        <a v-bind:href="link">hangge.com</a>
        <img v-bind:src="imgUrl" alt="">
        <!-- 2.冒号语法绑定属性是v-bind指令的语法糖（即简写） -->
        <a :href="link">hangge.com</a>
        <img :src="imgUrl" alt="">
    </div>
</template>

<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            link: 'https://hangge.com',
            imgUrl: 'https://www.hangge.com/blog/images/logo.png'
        }
    }
}
</script>

（2）在浏览器中运行代码，效果如下图所示：

二、绑定 class 属性

v-bind 可以用于绑定元素或组件的 class 属性，支持绑定的类型有字符串、对象和数组类型。

1，绑定字符串类型

（1）我们既可以直接为 class 绑定一个字符串。
<div :class="'abc'">class绑定字符串</div>

（2）也可以为 class 绑定一个字符串类型的 className 变量。
<div :class="className">class绑定字符串类型变量</div>

2，绑定对象类型

（1）下面是绑定对象的基本用法，支持两种写法：
<div :class="{ 'active': isActive }">class绑定对象1</div>
<div :class="{ active: isActive }">class绑定对象2</div>

（2）绑定对象可以有多个键值对： 
<div :class="{ 'active': isActive, 'title': true }">class绑定对象1</div>
<div :class="{ active: isActive, title: true }">class绑定对象2</div>

（3）默认的 class 可以和动态的 class 结合使用： 
<div class="abc cba" :class="{ active: isActive, title: true }">默认的class和动态的class结合</div>

（4）可以将绑定的对象放到一个单独的属性中： 
<template>
    <div class="my-component">
        <div class="abc cba" :class="classObj">绑定属性中的对象</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            classObj: {
                active: true,
                title: true
            }
        }
    }
}
</script>

（5）可以将返回的对象放到一个 methods（computed）方法中： 
<template>
    <div class="my-component">
        <div class="abc cba" :class="getClassObj()">绑定methods/computed返回的对象</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
        }
    },
    methods: {
        getClassObj() {
            return {
                active: false,
                title: true
            }
        }
    }
}
</script>

3，绑定数组类型

（1）下面样例 <div> 元素的 class 属性绑定了一个字符串类型的数组。
<div :class="['abc', title]">v-bind绑定class-数组语法</div>

（2）下面样例 class 属性绑定的数组包含三元运算符。 
<div :class="['abc', title, isActive ? 'active': '']">v-bind绑定class-数组语法</div>

（3）下面样例 class 属性绑定的数组包含对象。 
<div :class="['abc', title, {active: isActive}]">v-bind绑定class-数组语法</div>

三、绑定 style 属性

v-bind 可以用于绑定元素或组件的 style 属性，支持绑定对象和数组类型。

1，绑定对象类型

（1）下面样例为 <div> 元素的 style 属性绑定一个对象。当对象中的 key 有多个单词时，可用小驼峰或短横线分隔。
  • 短横线分隔需要用单引号引起来。 
  • key 的值如果是一个字符串，如 '16px'，则需要单引号。
<div :style="{color: finalColor, 'font-size': '16px'}">v-bind绑定style-对象语法</div>
<div :style="{color: finalColor, fontSize: '16px'}">v-bind绑定style-对象语法</div>
<div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">v-bind绑定style-对象语法</div>

（2）下面样例为 <div> 元素的 style 属性绑定一个对象类型的变量。  
<template>
    <div class="my-component">
        <div :style="finalStyleObj">绑定一个data中的属性</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            finalStyleObj: {
                'font-size': '16px',
                fontWeight: 700,
                backgroundColor: '#ddd'
            }
        }
    },
    methods: {
    }
}
</script>

（3）下面样例为 <div> 元素的 style 属性绑定一个返回对象类型的方法，也支持绑定 computed。 
<template>
    <div class="my-component">
        <div :style="getFinalStyleObj()">methods方法返回的对象</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
        }
    },
    methods: {
        getFinalStyleObj() {
            return {
                'font-size': '16px',
                fontWeight: 700,
                backgroundColor: '#ddd'
            }
        }
    }
}
</script>

2，绑定数组

（1）绑定数组可将多个样式对象应用到同一个元素上。下面样例为 <div> 元素的 style 属性绑定一个数组，数组中每一项都是一个对象。
<div :style="[{color:'red', fontSize:'15px'}]">v-bind绑定style-数组语法</div>

（2）下面样例 <div> 元素的 style 属性绑定一个数组，数组中每一项都是一个对象类型的变量。 
<template>
    <div class="my-component">
        <div :style="[style1Obj, style2Obj]">v-bind绑定style-数组语法</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            style1Obj: {
                color: 'red',
                fontSize: '16px'
            },
            style2Obj: {
                textDecoration: "underline"
            }
        }
    },
    methods: {
    }
}
</script>

四、动态绑定属性

1，基本介绍

动态绑定属性的名称和值，也就是属性的名称和值都是通过 JavaScript 表达式动态插入的。 

2，使用样例

（1）下面代码为 <div> 元素绑定的属性名称和值都是动态的。首先在 data 中定义 name 和 value 两个变量，name 存放属性的名称，值为 username 字符串；value 存放属性名称对应的值，值为 hangge 字符串。然后用：key="value" 的语法，就可以实现动态绑定属性名称和值。
<template>
    <div class="my-component">
        <div :[name]="value">v-bind动态绑定属性名称和值</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            name: "username",
            value: "hangge"
        }
    },
    methods: {
    }
}
</script>

（2）在浏览器中运行代码，查看生成的页面元素可以发现动态绑定属性生效了。

五、绑定一个对象

1，基本介绍

v-bind 指令不仅可以用于绑定单个属性，还可以用于直接绑定一个对象，从而实现一次批量绑定多个属性。

2，使用样例

（1）下面样例在 data 中定义一个对象类型的 info 变量，接着在 template 中使用 v-bind 指令将 info 绑定到 div 元素中，info 对象中的键值对会被拆解成 div 元素的各个属性，并绑定到 div 元素上。
<template>
    <div class="my-component">
        <div v-bind="info">v-bind动态绑定一个对象</div>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            info: {
                name: "hangge",
                age: 18,
                height: 1.88
            }
        }
    },
    methods: {
    }
}
</script>

（2）在浏览器中运行代码，查看生成的页面元素可以发现绑定一个对象生效了。
评论

全部评论（0）

回到顶部