如何在VueJS中绑定属性

VueJS中的 v-bind指令 可用于将一个或多个属性或组件prop绑定到元素上。如果属性绑定到我们在Vue实例中定义的数据，那么当数据发生变化时，我们可以动态地观察这些属性的变化。

要应用v-bind指令，我们首先要创建一个id为’app’的div元素。一旦创建了div元素，我们可以将 v-on:click.middle 指令应用到该元素上。

语法

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

v-bind:attribute = "expression"

在这里，“expression”是我们要绑定到属性的值。

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

在Vue项目中创建两个文件app.js和index.html。下面给出了两个文件的代码片段的文件和目录。请在您的Vue项目中复制并粘贴下面的代码片段，并运行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/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/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>标签将app.js文件包含在index.html文件中。最后，我们将app.js和index.html组合成一个完整的HTML文件代码。