v-bind对于样式控制的增强,针对class类名和style行内样式进行控制
-
操作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>
-
操作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>