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}"></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}"></div>

    <hr/>

    <div :style="{color:color}"></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>

最终页面效果：