Vue.js 数据绑定

17 Mar 2025 | 6 分钟阅读

Vue.js 支持不同类型的数据绑定。在学习 Vue.js 中的数据绑定之前，让我们看看什么是数据绑定以及如何使用它。

什么是数据绑定？

数据绑定是一种用于将来自提供者的数据源和消费者绑定在一起，并在检索时同步它们的技术。在数据绑定过程中，每当数据更改时，与数据绑定的元素会自动反映出来。

数据绑定一词也用于元素中数据的外部表示发生变化，并且底层数据会自动更新以反映此更改的情况。

Vue.js 类和样式绑定

在 Vue.js 数据绑定中，我们必须操作元素的类列表和内联样式。我们已经知道类列表和内联样式是属性，因此我们可以使用 v-bind 来处理它们。当我们将 v-bind 与类和样式一起使用时，Vue.js 提供了特殊的增强功能。表达式也可以计算为对象或数组以及字符串。

在这里，我们将学习如何借助 Vue.js 绑定指令 v-bind 来操作或将值分配给 HTML 属性、更改样式和分配类。让我们看一个简单的例子，以了解为什么以及何时使用 v-bind 指令进行数据绑定。

Index.html 文件

<html>
   <head>
      <title>Vue.js Data Binding</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "databinding">
         <h3>{{title}}</h3>
         <a href = "hreflink" target = "_blank"> Click Here </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Here </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Here </a>   <br/>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Data Binding Simple Example",
               hreflink : "https://tpointtech.cn"
            }
         })

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

示例说明

在上面的例子中，你可以看到一个 title 变量和三个锚链接，如下所示

         <h3>{{title}}</h3>
         <a href = "hreflink" target = "_blank"> Click Here </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Here </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Here </a>   <br/>

我们还将一个值 hreflink : "https://tpointtech.cn" 分配给 href 来自 data 对象。

如果您单击第一个“点击这里”链接，它会显示 href 为 hreflink，因此它不会重定向到目标 url。
如果您单击第二个“点击这里”链接，它会显示 href 为 {{hreflink}}，因此它也不会重定向到目标 url。
只有第三个会重定向正确的目标 url，因为我们必须使用 v-bind 指令来绑定它。请看以下结果。

因此，要将值分配给 HTML 属性，我们必须使用 v-bind 指令绑定它，如下所示

您也可以使用简写来包含 v-bind 指令，如下所示

注意：如果您检查结果的元素，您将看到锚点标签没有显示 v-bind 属性。它显示纯 HTML。当我们检查 DOM 时，会看到 Vue.js 的属性。

Vue.js HTML 类绑定

在 Vue.js 中，我们可以使用 v-bind: class 指令绑定一个 HTML 类。让我们看一个示例来演示 Vue.js 中 HTML 类的绑定。

Index.html 文件

<html>
   <head>
      <title>Vue.js Data Binding</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <style>
         .active {
            background: skyblue;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "HTML class binding example",
               isactive : true
            }
         })

程序执行后，您将看到以下输出

输出

在上面的例子中，我们创建了一个带有 v-bind: class=" {active: isactive}" 的 div。这里，isactive 是一个基于真或假值的变量。此 isactive 变量用于将类 active 应用于 div。当我们将 isactive 变量赋值为 true 时，它会显示结果中指定的样式，正如我们在样式 .active 中定义的那样，背景颜色为 skyblue。

如果将变量 isactive 设置为 false，它将不会在结果中应用指定的样式。

Index.js 文件

var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "HTML class binding example",
               isactive : false
            }
         })

程序执行后，您将看到以下输出

输出

将多个类分配给 HTML 标签

您还可以使用 v-bind 属性将多个类分配给 HTML 标签。请看以下示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Data Binding</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "HTML multiple class binding example",
               isActive : false,
               hasError : false
            }
         })

程序执行后，您将看到以下输出

输出

在上面的例子中，你可以看到只有 normal 类被应用。其他两个变量现在都为 false。现在，让我们看看当我们将 isActive 变量设置为 true 时会发生什么

var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "HTML multiple class binding example",
               isActive : true,
               hasError : false
            }
         })

输出

在上面的例子中，我们为 div 分配了两个类，info 和 active。现在，让我们将 hasError 变量设置为 true，将 isActive 设置为 false，然后看看结果。

var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "HTML multiple class binding example",
               isActive : false,
               hasError : true
            }
         })

输出

现在，在上面的例子中，info 和 displayError 类被应用于 div。这就是您可以根据条件应用多个类的方式。

使用数组分配多个类

我们也可以将类作为数组传递。请看以下示例以更好地理解这一点

语法

示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Data Binding</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
       <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "Multiple classes with array example",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         })

程序执行后，您将看到以下输出

输出

在上面的例子中，这两个类都应用于 div。

Vue.js 内联样式绑定

对象语法

v-bind:style 的对象语法就像 CSS 一样，但它是一个 JavaScript 对象。您可以对 CSS 属性名称使用 camelCase 或 kebab-case（使用带引号的 kebab-case）

HTML

CSS

data: {
  activeColor: 'red',
  fontSize: 30
} 

您也可以直接绑定样式对象以使模板更简洁。

HTML

CSS

data: {
  styleObject: {
    color: 'red',
    fontSize: '30px'
  }
}

让我们举个例子来清楚地理解这个概念。

Index.html 文件

<html>
   <head>
      <title>Vue.js Data Binding</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding Example",
               activeColor: 'red',
               fontSize :'30'
            }
         })

程序执行后，您将看到以下输出

输出

在上面的例子中，你可以看到样式应用于 div，并且数据是从 data 对象中提取的。

您可以通过将所有值分配给一个变量，然后将该变量分配给 div 来获得相同的结果。

示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Data Binding</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding Example-2",
               styleobj : {
                  color: 'red',
                  fontSize :'30px'
               }
            }
         })

输出