vue綁定屬性、綁定class及綁定style

1.綁定屬性  v-bind 或者 ： 例如：<img :src="pic_src" />

<template>
  <div id="app">
    <img :src="pic_src" />
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      pic_src: "https://cn.vuejs.org/images/logo.png",
      
    };
  }
};
</script>

<style>
</style>

 2.綁定class <div :class="{'red':active}">111111111111</div>

<template>
  <div id="app">
    <img :src="pic_src" />
    <hr/>
    <div :class="{'red':active}">111111111111</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      pic_src: "https://cn.vuejs.org/images/logo.png",
      active: true
    };
  }
};
</script>

<style>
.red {
  color: red;
}
</style>

 

3.綁定style  <div :style="{color:color}">2222222222</div>

<template>
  <div id="app">
    <img :src="pic_src" />
    <hr/>
    <div :class="{'red':active}">111111111111</div>
    <hr/>
    <div :style="{color:color}">2222222222</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      pic_src: "https://cn.vuejs.org/images/logo.png",
      active: true,
      color:'blue'
    };
  }
};
</script>

<style>
.red {
  color: red;
}
</style>

最終頁面效果：