Vue.js 中使用 v-bind 绑定数据值-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 中使用 v-bind 绑定数据值

在 Vue.js 中，我们可以使用 v-bind 指令来绑定数据值到 HTML 元素的属性上，这样可以使得 HTML 元素的属性值动态的绑定到 Vue 实例中的数据属性。

基本用法

v-bind 指令可以在绑定表达式时使用缩写形式，例如 v-bind:href 可以缩写为 :href。下面是一个基本的例子：

<div v-bind:id="itemId"></div>

上面代码中，v-bind:id 可以缩写为 :id，这里的 itemId 是 Vue 实例中的一个数据属性。

条件渲染

v-bind 指令也可以在条件渲染中使用。例如，我们可以根据一个布尔值动态的渲染一个 class 到 HTML 元素上。

<div v-bind:class="{ active: isActive }"></div>

上面的代码中，div 元素会根据 isActive 数据属性的值来动态的渲染一个 active class 到其 class 属性上。

绑定对象

我们也可以使用对象来一次性绑定多个属性和值到元素上。

<div v-bind="{ id: itemId, class: 'item' }"></div>

上面的代码中，div 元素会绑定 id 属性和 class 为 item，并且它们的值分别绑定到 itemId 和字符串 "item"。

绑定 props

我们也可以使用 v-bind 指令来向子组件传递 props。

<my-component v-bind:prop-name="propValue"></my-component>

上面的代码中，我们使用 v-bind 指令将 propValue 数据属性绑定到 MyComponent 组件的 propName 属性上。

总结

v-bind 指令让我们可以将 Vue 实例中的数据属性动态的绑定到 HTML 元素的属性中。这样可以使得 HTML 元素的属性值实时更新，并实时响应 Vue 实例中数据的变化，从而实现了前后端数据绑定的效果。

示例代码

下面是一个关于 v-bind 指令的完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js v-bind</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .item {
            background-color: #eee;
            padding: 10px;
            margin-bottom: 5px;
        }
        .active {
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:id="itemId">
            <p v-bind:class="{ active: isActive }">Hello world!</p>
            <div v-bind="{ id: itemId, class: 'item' }">Item content</div>
            <my-component v-bind:prop-name="propValue"></my-component>
        </div>
    </div>

    <script>
        Vue.component('my-component', {
            props: ['propName'],
            template: '<p>Prop value: {{ propName }}</p>'
        });

        var vm = new Vue({
            el: '#app',
            data: {
                itemId: 23,
                isActive: true,
                propValue: 'component value'
            }
        });
    </script>
</body>
</html>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a49362add4f0e0ffce16ba

Vue.js 中使用 v-bind 绑定数据值

纠错反馈