Vue中的 :class 和 :style

Vue中的 :class 和 ：style

1. :class = “a”

      说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值

2. :class = “{ active:isactive }”

      Active的存在取决于 isactive的值，为true就说明存在，为false就说明不存 在。

3. :class = [“a”,”b”]

      注意 在数组中元素带不带引号的问题。带了说明是类名，不带就是data中      的属性对应的值。

 

可以在class后跟bool来决定这个样式是否生效

　　　　 <div
             v-for="(item,index) in dateMenus"
　　　　　　　<!--index和ctime是两个数字，如果两者相等，则item-time这个样式会渲染-->
             :class="['item-time',index==ctime?' active':'']"
             @click="ctime=index">
            <div class="time-clock">{{item | dateFilter('HH:mm')}}</div>
            <div class="time-state-on">
                <span class="on-text" v-if="index==0">快抢中</span>
                <span class="on-over" v-if="index==0">距离结束：{{alltimes[index]}}</span>

                <span class="on-text" v-if="index>0">即将开始</span>
                <span class="on-over" v-if="index>0">距离开始：{{alltimes[index]}}</span>
            </div>
        </div>

 

:style

      在vue中 style 是一个对象

      1. 注意 style中是一个对象，中间用，隔开。前者是style属性，值是data      中对应的数值