HTML 属性中的值应使用 v-bind 指令。

 

<div v-bind:id="dynamicId"></div>对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

<button v-bind:disabled="isButtonDisabled">按钮</button>

以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的 <button> 元素中。

 

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

 

v-bind 指令

 

<div id="app">

  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">

  <br><br>

  <div v-bind:class="{'class1': use}">

    v-bind:class 指令

  </div>

</div>

    

<script>

const app = {

  data() {

    return {

      use: false

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>