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

Vue组件学习 | 八、 v-bind指令

article 2024/11/1 2:05:38

Vue 中 `v-bind` 指令的用法

v-bind 是 Vue 中的一个指令，用于动态地绑定一个或多个属性，或一个组件 prop 到表达式。

基本用法

绑定一个属性

<template>
  <img v-bind:src="imageSrc">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    }
  }
}
</script>

缩写

v-bind: 可以缩写为 :：

<template>
  <img :src="imageSrc">
</template>

绑定多个属性

<template>
  <img :src="imageSrc" :alt="imageAlt">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
      imageAlt: '示例图片'
    }
  }
}
</script>

绑定 class 和 style

绑定 class

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

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

绑定 style

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
}
</script>

绑定对象

<template>
  <img v-bind="imageAttributes">
</template>

<script>
export default {
  data() {
    return {
      imageAttributes: {
        src: 'https://example.com/image.jpg',
        alt: '示例图片'
      }
    }
  }
}
</script>

绑定 prop

<template>
  <my-component :my-prop="someValue"></my-component>
</template>

<script>
export default {
  data() {
    return {
      someValue: '这是 prop 的值'
    }
  },
  components: {
    myComponent: {
      props: ['myProp'],
      template: '<div>{{ myProp }}</div>'
    }
  }
}
</script>

条件和循环绑定

条件绑定

<template>
  <button v-bind:disabled="isButtonDisabled">点击我</button>
</template>

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

循环绑定

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '列表项 1' },
        { id: 2, text: '列表项 2' }
      ]
    }
  }
}
</script>