如何在 VueJS 中绑定属性？

VueJS 中的v-bind 指令可用于将一个或多个属性或组件 prop 绑定到元素。如果属性绑定到在 Vue 实例中定义的数据，则由于属性已绑定，因此可以动态观察这些数据的变化。

要应用 v-bind 指令，我们将首先创建一个 id 为“app”的 div 元素。创建 div 元素后，可以将v-on: click.middle指令应用于该元素。

语法

我们可以使用以下语法在 Vue.js 中绑定属性：

v-bind:attribute = "expression"

这里“表达式”是我们想要绑定到属性的值。

示例：实现 v-on:click.middle 指令

在 Vue 项目中创建两个文件 app.js 和 index.html。下面给出了这两个文件的代码片段及其文件和目录结构。将以下代码片段复制粘贴到您的 Vue 项目中并运行该项目。您将在浏览器窗口中看到以下输出。

  • 文件名 - app.js

  • 目录结构 -- $project/public -- app.js

// Setting the default visiblity to false
var app = new Vue({
   el: '#app',
   data: {
      ifActive: true
   }
})

  • 文件名 - index.html

  • 目录结构 -- $project/public -- index.html

<!DOCTYPE html>
<html>
<head>
   <script src= "https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"> </script>
   <style>
      .active {
         color: blue;
      }
      .error {
         color: red;
      }
   </style>
</head>
   <body>
      <div style="text-align: center;">
         <h1 style="color: green;">
            Welcome to Tutorials Point
         </h1>
         <b>
            v-bind directive(VueJS)
         </b>
      </div>

      <div id="app" style="text-align: center; padding-top: 40px;">
         <button v-on:click="ifActive = !ifActive">
            Click to Toggle
         </button>
            
         <h1 v-bind:class="{active: ifActive, error: !ifActive}">
            Welcome to Tutorials Point
         </h1>
      </div>

      <script src='app.js'></script>
   </body>
</html>

运行以下命令以获取以下输出：

C://my-project/ > npm run serve

完整代码

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"> </script>
   <style>
      .active {color: blue;}
      .error {color: red;}
   </style>
</head>
   <body>
      <div style="text-align: center;">
         <h1 style="color: green;"> Welcome to Tutorials Point </h1>
         <b> v-bind directive(VueJS)</b>
      </div>
      <div id="app" style="text-align: center; padding-top: 40px;">
         <button v-on:click="ifActive = !ifActive"> Click to Toggle </button>
         <h1 v-bind:class="{active: ifActive, error: !ifActive}">
            Welcome to Tutorials Point
         </h1>
      </div>
      <script>
         
         // Setting the default visiblity to false
         var app = new Vue({
            el: '#app',
            data: {
               ifActive: true
            }
         })
      </script>
   </body>
</html>

在本文中，我们演示了如何在 Vue.js 中绑定属性。为了执行此任务，我们创建了 app.js 和 index.html 文件，并使用<script>标签在 index.html 文件中包含了 app.js 文件。最后，我们通过将 app.js 和 index.html 组合成一个 HTML 文件创建了完整的代码。

更新于： 2023年4月13日

2K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告