Vue中v-bind对样式控制的增强—(详解v-bind操作class以及操作style属性，附有案例+代码)
文章目录
v-bind对样式控制的增强
2.1 操作class
2.1.1 语法
<div> :class = "对象/数组">这是一个div</div>
2.1.2 对象语法
当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
适用场景：一个类名，来回切换
2.1.3 数组语法
当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
<div class="box" :class="[ '类名1', '类名2', '类名3' ]"></div>
使用场景:批量添加或删除类
2.1.4 使用
<style>
.box {
width: 50px;
height: 50px;
border: 1px solid #000;
margin-top: 5px;
}
.red {
background-color: red;
}
.big {
width: 100px; height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" :class="{ big: true, red: true }">
你好Java
</div>
<div class="box" :class="['red', 'big']">
你好Java
</div>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
2.1.5 Test
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
border-bottom: 2px solid #1e3c9f;
padding: 0 10px;
}
li {
width: 100px;
height: 50px;
line-height: 50px;
list-style: none;
text-align: center;
}
li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #333333;
}
li a.active {
background-color: #12e06f;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item ,index) in list" :key="item.id" @click="activeIndex = index">
<a href="#" :class="{active: index === activeIndex}">{{item.name}}</a>
</li>
</ul>
</div>
<script src="js/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>
2.2 操作style
2.2.1 语法
:style中的css属性会覆盖 class="box"的css样式
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
2.2.2 使用
<style>
.box {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="box" :style="{ width: '100px', height: '100px', backgroundColor: 'green' }">
</div>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
2.2.3 Test
<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>
</head>
<body>
<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="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
percent: 30
}
})
</script>
</body>
原文地址：https://blog.csdn.net/weixin_54555405/article/details/142966358
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！