当前位置：首页 > article >正文

Vue学习笔记（二）

article 2024/10/27 8:04:07

在这里插入图片描述

属性绑定

双大括号不能再HTML attributes中使用。想要响应式地绑定一个attributte，应该使用v-bind指令

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

<template>
  <div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitle">测试</div>
</template>

<style>

.appclass{
  color: red;
  font-size: 30px;
}
</style>

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

20241024181245

简写

因为v-bind非常常用，我们提供了特定的简写语法:,即直接将v-bind省去

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

布尔型attribute

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

<script>
  export default {
    data() {
      return {
        dynamicClass: "appclass",
        dynamicId: "appId",
        dynamicTitle: undefined,
        isButtonDisabled: false
      }
    }
  }
</script>

<template>
  <div :id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试</div>
  <button :disabled="isButtonDisabled">Button</button>
</template>

<style>

.appclass{
  color: red;
  font-size: 30px;
}
</style>

动态绑定多个值

如果你有像这样的一个包含多个attribute的JavaScript对象

<script>
  export default {
    data() {
      return {
        dynamicClass: "appclass",
        dynamicId: "appId",
        dynamicTitle: undefined,
        isButtonDisabled: false,
        objectOfAttrs: {
          id: "appId",
          class: "appclass"
        }
      }
    }
  }
</script>

<template>
  <div :id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试1</div>
  <button :disabled="isButtonDisabled">Button</button>
  <div v-bind:="objectOfAttrs">测试2</div>
</template>

<style>

.appclass{
  color: red;
  font-size: 30px;
}
</style>