【Vue】v-bind对样式控制的增强-操作class

文章目录

一、语法
二、示例代码
三、京东秒杀-tab栏切换导航高亮
四、v-bind对有样式控制的增强-操作style
五、进度条案例

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

一、语法

语法

<div> :class = "对象/数组">这是一个div</div>

对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

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

适用场景：一个类名，来回切换，eg：tab栏

数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

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

使用场景:批量添加或删除类

二、示例代码

<body><div id="app"><div class="box" :class="{ pink: true, big: true }">黑马程序员</div><!-- 注意这里需要加引号 --><div class="box" :class="['pink', 'big']">黑马程序员</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>
</body>

三、京东秒杀-tab栏切换导航高亮

需求：

当我们点击哪个tab页签时，哪个tab页签就高亮

思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

代码

<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/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {activeIndex: 2, // 记录高亮list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>
</body>

四、v-bind对有样式控制的增强-操作style

语法

<!-- 属性值需要是字符串，否则会被当成变量 -->
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
<!-- 属性名和属性值相等时可以省略 -->
<div class="box" :style="{ CSS属性名1, CSS属性名2 }"></div>

强大的地方在于，它可以控制单个属性，而不是直接添加某个类

代码示例

<body><div id="app"><!-- 外层盒子底色 （黑色） --><div class="progress"><!-- 内层盒子 - 进度（蓝色） --><!-- 因为是JS对象，所以这里可以做一个拼接 --><div class="inner" :style="{ width: percent + '%' }"><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></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>

五、进度条案例

<style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}
</style><<div id="app">
<!-- 外层盒子底色 （黑色） -->
<div class="progress"><!-- 内层盒子 - 进度（蓝色） --><div class="inner" :style="{ width: percent + '%' }"><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>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {}})
</script>