VUE学习——属性绑定

BUG批量生产者2024-02-09 21:50

属性绑定，就是给html添加id、class这样类似的操作。

js 复制代码

<template>
  <div v-bind:id="dynamicId">
    <div v-bind:class="dynamicClass">Test</div>
  </div>
</template>

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

<style>
.dynamicClass{
  color: red;
  font-size: 16px;
}

</style>

对于属性绑定我们使用v-bind进行，日常中，我们可以简写：

html 复制代码

<div :class="dynamicClass">Test</div>

我们也可以绑定布尔值，当值为null或者undefind的时候，不生效。

绑定多个属性，我们可以将其封装在对象里。

javascript 复制代码

<template>
  <div v-bind="objectOfAttrs">绑定多个属性</div>
</template>

<script>
  export default{
    data(){
      return{
        objectOfAttrs:{
          id:'idName',
          class:'className'
        }
      }
    }
  }
</script>

<style>
.className{
  color: red;
  font-size: 16px;
}

</style>