vue.js v attr

<template>
  <div>
    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc" />

    <!-- 简写形式 -->
    <img :src="imageSrc" />

    <!-- 绑定多个属性 -->
    <a :href="url" :title="linkTitle">Click me</a>

    <!-- 动态绑定class -->
    <div :class="{ active: isActive }"></div>

    <!-- 动态绑定style -->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg',
      url: 'http://example.com',
      linkTitle: 'Example Link',
      isActive: true,
      activeColor: 'red',
      fontSize: 30
    };
  }
};
</script>

<template>
  <div :style="{ backgroundColor: isBlue ? 'blue' : 'red' }"></div>
</template>

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