v-bind操作class
参考文献：
Vue的快速上手
Vue指令上
Vue指令下
Vue指令的综合案例
指令的修饰符
文章目录
- v-bind操作class
- v-bind对于样式控制的增强
- 操作class
- 案例(tab导航高亮)
- 操作style
- 操作style案例
- 结语
博客主页: He guolin-CSDN博客
关注我一起学习，一起进步，一起探索编程的无限可能吧！让我们一起努力，一起成长！
嗨！收到一张超美的图， 愿你每天都能顺心！
注：在看本文章前优先把参考文献看完！！！
v-bind对于样式控制的增强
为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内式进行控制。
操作class
语法 :class = “对象/数组”
1.对象 -> 键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
<div class="box" :class="{类名1:布尔值,类名2:布尔值}"></div>
使用场景：一个类名来回切换。
2.数组 -> 数组中所有的类，都会添加到盒子上，本质就是一个class列表
<div class="box" :class="[类名1,类名2,类名3]"></div>
使用场景：批量添加或删除类。
那么我们接下来我们通过代码来演示一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 3px solid #000;
}
.pink{
background-color: pink;
}
.big{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">Hello Word</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
在这串代码中，我们队box类进行了简单的css样式设置，同时设置了pink和big两个类，但是我们将这两个属性写进盒子里，他就会覆盖原来有的类，我们不希望将它写死，而是动态的控制这些类。
我们可以稍作修改。
1.用对象的方法
<div class="box" :class="{pink:true,big:false}">Hello Word</div>
2.用数组的方法。(不显示big,数组里就不加上)
<div class="box" :class="["big"]">Hello Word</div>
这样它就会对我们的盒子颜色改成粉色，而且不会改变我们的盒子大小。
案例(tab导航高亮)
既然了解了我们的v-bind对class的操作，那么接下来看一个对导航栏高亮控制的案例。
核心思路：
1.基于数据渲染tab -> v-for。
2.准备下标记录高亮的是哪一个tab -> activeIndex
3.基于下标，动态控制class类名 -> v-bind:calas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
list-style-type: none;
padding-left: 0;
}
ul li {
display: inline;
margin-right: 2px;
font-size: 24px;
}
ul li a{
text-decoration: none;
}
.active{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
<a :class="{active:index === activeIndex}" href="#">{{item.name}}</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
activeIndex:0,//记录高亮
list:[
{ id: 1, name: "今日秒杀" },
{ id: 2, name: "每日特价" },
{ id: 3, name: "品类秒杀" },
]
}
})
</script>
</body>
</html>
我们对li标签进行循环输出，并且在点击时将我们的高亮值赋值为此标签对应的id值以此来实现我们的目的，我们用v-bind进行属性设置，只有被点击的li标签才会显示属性的样式。接下来我们来看看效果。
操作style
语法 :style=“样式对象”
<div class="box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div>
以我们写v-bind控制class属性的例子为例，我们改成对样式的控制来控制我们的属性
<div class="box" :style="{width:'300px',height:'300px'}"></div>
可以看到我们的盒子变成了300*300。
注意：如果属性名有一杠，例如background-color要用引号引起来，或者写成驼峰。
操作style案例
我们可以来做个进图条
其本质就是两个盒子，进图条这个盒子在增长的时候改变一下宽的比例就可以实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out{
position: relative;
width: 400px;
height: 50px;
border-radius: 100px;
border: 1px solid black;
float: left;
}
.in{
height: 50px;
border-radius: 100px;
background-color: blue;
}
.click{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="out">
<div class="in" :style="{width:prcent+'%'}"></div>
</div>
<button class="click" @click="start">开始</button>
<p>{{prcent}}%</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
prcent:0
},
methods:{
start(){
let interval = setInterval(()=>{
if(this.prcent < 100){
this.prcent += 1;
}else{
clearInterval(interval)//当进度百分百时停止动画
}
},10)//每隔10毫秒进度条增加百分之1
}
}
})
</script>
</body>
</html>
我们对in这个盒子里的宽度以百分比来呈现，并写了一个方法start，我们点击开始按钮，当进度条没有达到百分百的时候，会每隔一段时间进行增长。
我们来看一下运行效果。
结语
本次分享就到这里了，感谢小伙伴的浏览，如果有什么建议，欢迎在评论区留言，如果给小伙伴们带来了一些收获，请留下你的小赞，你的点赞和关注将会成为博主分享每日学习的动力。
