data数据

 data() {
    return {
   active:true,
   error:true,
   imageUrl:require('../../src/assets/1.jpeg') ,//如果图片路径正确但是不显示 一定要加上require
   herfUrl:'http://www.baidu.com'
    }

一、动态绑定属性
1、 img标签的src属性 imageUrl 是图片的动态地址

<img v-bind:src="imageUrl" alt="">

语法糖写法 可简写为下面的代码

<img :src="imageUrl" alt="">

2、a标签的 href属性 herfUrl 是动态链接

<a v-bind:href="herfUrl" >百度一下，你就知道</a>

语法糖写法 可简写为下面的代码

 <a :href="herfUrl" >百度一下，你就知道</a>

二、Class 与 Style 动态绑定

1、对象语法 ：class = ‘{属性名称：属性值}’ （比较常用）

1.1、单个class

//activeStyle :class的名称  
//active：是一个Bool类型的值 如果为true 则绑定 activeStyle 否则不绑定

  <div v-bind:class='{activeStyle:active}'>
    动态绑定class
  </div>

1.2、多个class

对象中可以传入更多字段来动态切换多个 class。

//activeStyle和errorStyle 可以叠加
//如果activeStyle和errorStyle 中有共同的 属性则就近原则 （谁在后显示谁的）
  <div v-bind:class='{activeStyle:active,errorStyle:error}'>
    动态绑定class
  </div>

如果active为true 和 error 为false
结果渲染为：

  <div class="activeStyle">
    动态绑定class
  </div>

如果active为false 和 error 为true
结果渲染为：

  <div class="errorStyle">
    动态绑定class
  </div>

如果active 和 error 都为true
结果渲染为：

  <div class="activeStyle errorStyle">
    动态绑定class
  </div>

1.3、可以与普通的 class attribute 共存（也是就近原则）

 <div class="baseClass" v-bind:class='{activeStyle:active,errorStyle:error}'>
    动态绑定class
  </div>

2、数组语法 ：[class1、class2、class3]

bind:class='[activeStyle,errorStyle]'>
    动态绑定class
  </div>

结果渲染为：

  <div class="activeStyle errorStyle">
    动态绑定class
  </div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

  <div v-bind:class='[active? activeStyle : errorStyle]'>
    动态绑定class
  </div>

练习、有语文、数学、外语三门课程 选中的颜色为红色 未选中的颜色为黑色

<template>
  <div class="hello">
   <ul>
     <li v-for="(item,index) in books" :key="item" :class="{active:index==currentIndex}" @click="changeColor(index)">{{item}}</li>
   </ul>

  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
   books: ['语文','数学','外语','生物'],
   currentIndex:0,
   active:true,
  }
  },
  methods:{
    changeColor(index){
      this.currentIndex = index
    }
  }
}
</script>
<style scoped>
.active{
  color: red;
}
</style>