v-bind指令使用说明

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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64900.shtml

张贴在3