当前位置：首页 > article >正文

Vue中v-bind对样式控制的增强—(详解v-bind操作class以及操作style属性，附有案例+代码)

article 2024/10/20 14:47:32

文章目录

v-bind对样式控制的增强
- 2.1 操作class
- - 2.1.1 语法
  - 2.1.2 对象语法
  - 2.1.3 数组语法
  - 2.1.4 使用
  - 2.1.5 Test
- 2.2 操作style
- - 2.2.1 语法
  - 2.2.2 使用
  - 2.2.3 Test

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>