vue中v-bind对样式的加强

v-bind对样式的加强

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

操作class

语法 :class = “对象/数组”

对象→**键就是类名，值是布尔值。**如果值为true，有这个类，否则没有这个类
- 适用场景：一个类名来回切换
数组→数组中所有的类，都会添加到盒子上，本质就是一个class列表

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            font-size: 30px;
            margin-top: 10px;
        }
        .pink {
            background-color: pink;
        }
        .big {
            width: 300px;
            height: 300px;
        }
    style>
head>
<body>
    <div id="app">
        <div class="box" :class="{pink:true ,big:true}">mannordiv>
        <div class="box" :class="['pink','big']">雷迪亚兹div>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

操作style

语法 :style = “样式对象”
- 适用场景:某个具体属性的动态设置

  <div id="app">
    <div class="box" :style="{width:'400px',height:'400px',backgroundColor:'green'}">div>
  div>
1
2
3

小demo–动态滑动条：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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:precent+'%'}">
                <span>{{precent}}%span>
            div>
        div>
        <button @click="precent=25">设置25%button>
        <button @click="precent=50">设置50%button>
        <button @click="precent=75">设置75%button>
        <button @click="precent=100">设置100%button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                precent: 0,
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

相关阅读:
年轻人应该做长期并能提升自己的兼职副业
基于Vue+SpringBoot的超市账单管理系统开源项目
如何有效的进行代码测试呢?
element-ui的tree组件获取父级节点渲染面包屑
山东大学项目实训十——Android开发环境搭建
React-路由导航
Linux-笔记 samba实现映射网络驱动器到Win 10
生成对抗网络（GAN）
Docker Compose安装部署Jenkins
Object.defineProperty和proxy代理模式

原文地址：https://blog.csdn.net/m0_63144319/article/details/132828330