v-bind对样式控制

v-bind对于样式控制的增强，针对class类名和style行内样式进行控制

1. 操作class:
   语法：class=“对象/数组”

   a .对象-->键就是类名，值就是布尔值，如果值为true，有这个类，否则没有这个类
   适用场景：一个类名来回切换

     <div class="box" :class="{类名1:布尔值,类名2:布尔值}"></div>
   

   
   b .数组-->数组中所有的类，都会添加到盒子上，本质就是一个class列表
   适用场景：批量添加或删除类

   <div class="box" :class="[类名,类名2,类名3]"></div>

   c .案例：京东秒杀tab导航高亮
   核心思路：
   基于数据动态渲染tab    v-for
   准备下标记录高亮的是哪一个tab    ---->activeindex
   基于下标，动态控制class类名               v-bind:class

   <template>
   <div>
     <ul>
       <li v-for="(item,index) in list" v-bind:key ="item.id" @click="activeIndex = index"> <!--遍历到哪项，就将该项的下标赋值给要高亮的下标-->
         <!-- 如果遍历到的该项下标和记录的activeIndex相等，则高亮 -->
         <a :class="{active:index === activeIndex}" class="active" href="#">{{item.name}}</a>
       </li>   
     </ul>
   </div>
   
   </template>
   
   <script setup>
   import {ref} from 'vue'
   const activeIndex = 2
   const list = [
     {id:1,name:'京东秒杀'},
     {id:2,name:'每日特价'},
     {id:3,name:'品类秒杀'},
   ]
   </script>
   
   <style>
   .active {
     background-color: red;
   }
   </style>
   

2. 操作style
   语法： ：style="样式对象"
   动态设置样式变化
    

   <template>
   <!-- <div class="box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div> -->
   <!-- 外层盒子底色黑 -->
   <div class="progress" :style="{'background-color':'black'}">
     <!-- 内层盒子底色蓝 -->
     <div class="inner" :style="{width:percent + '%','background-color':'blue'}">
       <span>{{ percent }}%</span>
     </div>
   </div>
   <button @click="percent = 25">设置25%</button>
   <button @click="percent = 50">设置50%</button>
   <button @click="percent = 75">设置75%</button>
   <button @click="percent = 100">设置100%</button>
   </template>
   
   <script setup>
   import {ref} from 'vue'
   const percent = ref(0)
   
   </script>