大二寒假学习8(vue学习之属性绑定，动态绑定的)

前提

 

template里面写的是html,script里面写的是css.

双大括号不能在HTML attributes(属性)  中使用，想要响应式绑定一个attribute,应该使用 v-bind指令。

 

模板代码

 

里面的属性绑定是一个动态绑定的

<template>
 <div  v-bind:class="dynamicClass">测试</div>
</template>

<script>
export default{
  data(){
    return{
      dynamicClass:"one"
    }
  }
}
</script>

<style>
.one{
  color: red;
}
</style>

 

简写

因为 v-bind 非常有用，我们提供了特定的简写语法，

 <div  :class="dynamicClass" :id="dynamicId" >测试002</div>

效果如下图所示：

 

布尔型Attribute

布尔型 attribute 依据 true/false 值来决定 attribute 是否该存在于该元素上，disabled 就是最常见的例子之一。

 

<button :disabled="isButtonDisabled">button</button>

<script>
export default{
  data(){
    return{
       isButtonDisabled:true
    }
  }
}
</script>
     

效果如下图：

 

 

动态绑定多个值

如果有一个包含多个 attribute 的 JavaSript 对象

 

objectOfAttrs:{
        class:"one",
        id:"two"
      }
<div v-bond="objectOfAttrs">测试003</div>

 

 

里面的属性绑定是一个动态绑定的