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>