通过v-bin来绑定Class和Style，来给标签设置动态的值

动态的Class

语法

  1. <div :class="{ 类名: Vue变量(布尔值) }"></div>
<template>
  <div>
    <!-- 语法:
      :class="{类名: 布尔值}"  为true时添加class false时删除
      使用场景: vue变量控制标签是否应该有类名
            :class 可以和 class 共存
     -->
    <p  class="active" :class="{red_str: bool}">动态class</p>
  </div>
</template>

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

<style scoped>  /* 设置样式 */
  .red_str{
    color: red;
  }
  .active{
      color:#ff0;
  }
</style>

三元表达式来判断添加类

<p :class="{item.price>100？.red_str:'' }">动态class</p>

如果大于100就显示

也可以添加多个类

 <p  class="active" :class="{red_str: bool,'text-bgc': bool}">动态class</p>

不写在标签里

<p :class="classObj" >动态class</p>

<script>
export default {
  data() {
  return {
    classObject: {
      active: true,
      'text-danger': false //当类名中包含特殊字符如横线-空格等js不支持的变量时需要用引号。
    }
  }
}
}
</script>

动态的Style

语法

<div :style="{ css属性名: 值（Vue变量表示）, fontSize: fontSize + 'px' }"></div>

<template>
  <div>
    <!-- 动态style语法
      :style="{css属性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>

不写在标签里

多个css样式存入对象里

<template>
  <div>
    <p :style="styleObj">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      styleObj:{
               color: 'red',
              fontSize: '13px'
      }
    }
  }
}
</script>

多个对象存入数组里

<p :style="[styleObj,otherStyObj]">动态style</p>