【vue3入门】-【5】属性绑定

属性绑定

双大括号不能在html attributes中使用。想要响应的绑定一个attribute，应该使用v-bind指令

<script>
export default {
  data() {
    return {
      msg: "active",
      myid:"test-id"
    }
  }
}
</script>

<template>
  <div class="{{msg}}">测试</div> <!--错误用法-->
  <div v-bind:id="myid" v-bind:class="msg">测试</div>
</template>

v-bind指令知识Vue将元素的id attribute与组件dynamicid属性保持一致，如果绑定的值是null或者是undefined，那么该attribute将会从渲染的元素上移除

<script>
export default {
  data() {
    return {
      msg: "msg",   // 如果值为null或者为undefined，则会将该属性从标签属性中移除
      myid:"test-id",
      mytitle:"my-title"
    }
  }
}
</script>
<template>
  <div v-bind:id="myid" v-bind:class="msg" v-bind:title="mytitle">测试</div>
</template>

<style>
.active{
  color:red;
  font-size:20px;
}
</style>

属性绑定-简写

因为v-bind非常常用，因此vue提供了特定的简写语法

<div :id="dynamicId" :class="dynamicClass"></div>

布尔型Attribute

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

<script>
export default {
  data() {
    return {
      msg: "msg",
      myid:"test-id",
      mytitle:"my-title",
      isbuttondisable:true // true控制不可点击，false控制可点击
    }
  }
}
</script>
<template>
  <div v-bind:id="myid" v-bind:class="msg" v-bind:title="mytitle">测试</div>
  <button :disabled="isbuttondisable">按钮</button>
</template>

<style>
.active{
  color:red;
  font-size:20px;
}
</style>

动态绑定多个值

<style>
.active {
  color: red;
  font-size: 20px;
}
</style>
<template>
  <div v-bind:id="myid" v-bind:class="msg" v-bind:title="mytitle">测试</div>
  <button :disabled="isbuttondisable">按钮</button>
  <div v-bind="objectofattrs"></div> <--使用时，直接使用封装好的属性-->
</template>
<script>
export default {
  data() {
    return {
      msg: "msg",
      myid: "test-id",
      mytitle: "my-title",
      isbuttondisable: true,
      objectofattrs:{ //直接囊括多类属性
        myid: "test-id",
      mytitle: "my-title",
      }
    }
  }
}
</script>