VUE基础--属性绑定

双括号“{{}}”无法再HTML attributes中使用，想要响应式地绑定一个attribute，需使用v-bind指令

 vue-demo1项目搭建完成后，创建一个src/components/Hello.vue项目

 在src/App.vue中将Hello.vue进行引入

 src/components/Hello.vue初始如下：

<template>

</template>

<script>
  export default {
    data(){
      return{

      }
      }
    }
  }
</script>

编写以下内容，并查看页面中element（元素）里的内容，发现vue属性已绑定

 为class修改css样式：

注：

1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。

2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

3，id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。

 效果显示如下：

当引入的属性值为 undefined 或 null 时，在页面中的element将不会显示

由于v-bind较为常用，vue也提供了特定的简写语法：

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

传入布尔型的属性：

布尔型attribute依据true或false来决定该属性是否应该存在于该元素上，disabled就是长江的例子之一

<template>
    
    <button v-bind:disabled="isButtonDisabled">Button</button>
    <button v-bind:disabled="isButtonDisabled1">Button</button>
    
</template>

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

从上图可发现，当disabled设为true时，button无法点击，反之可点击

动态绑定多个值

<template>    

    <div v-bind="objectOfAttrs">动态绑定多个值</div>

</template>

<script>
export default {
    data(){
        return{
            objectOfAttrs:{
                id:"ID",
                class:"CLASS"
            }
        }
    }
}