动态class

 用v-bind给标签class设置动态的值.

 语法:

• 格式1：<标签 :class="变量" />
• 格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" /> - - 如果布尔值为true，就添加对应的类名   可以和静态class共存.

        1. 变量,三元表达式
        
        <!-- 元素自有class和v-bind绑定的class会协同工作，一起生效 -->
        <div class="box" v-bind:class="cla ? 'bg-blue': 'bg-green'">

        2.布尔值判断
       <div class="box" :class="{completed:item.isDone}">
      // item.isDone ===false , div 会移除 completed , 为 true 会添加类名  
      //可以通过类名的的产生与移除控制盒子的样式.

  动态绑定类名用 v-bind:class , 简写为 :class . 三元表达式也可以在布尔值类型中使用 , 但从简洁方面看 , 推荐使用 格式2.