vue中v-bind对样式的加强

v-bind对样式的加强

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

操作class

  • 语法 :class = "对象/数组"
  1. 对象→**键就是类名,值是布尔值。**如果值为true,有这个类,否则没有这个类

    • 适用场景:一个类名来回切换
  2. 数组数组中所有的类,都会添加到盒子上,本质就是一个class列表

html 复制代码
<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}">mannor</div>
        <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>

操作style

  • 语法 :style = "样式对象"
    • 适用场景:某个具体属性的动态设置
html 复制代码
  <div id="app">
    <div class="box" :style="{width:'400px',height:'400px',backgroundColor:'green'}"></div>
  </div>

小demo--动态滑动条:

html 复制代码
<!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>Document</title>
    <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>
相关推荐
程序员的世界你不懂38 分钟前
【Flask】测试平台开发,重构提测管理页面-第二十篇
vue.js·重构·flask
IT_陈寒38 分钟前
Python异步编程的7个致命误区:90%开发者踩过的坑及高效解决方案
前端·人工智能·后端
猫猫村晨总1 小时前
整理了几道前端面试题
前端·vue.js·面试
江拥羡橙1 小时前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
你的电影很有趣1 小时前
lesson55:CSS导航组件全攻略:从基础导航条到动态三级菜单与伸缩菜单实现
前端·css
蔗理苦1 小时前
2025-09-05 CSS4——浮动与定位
开发语言·前端·css·html·css3
浊浪载清辉2 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
Want5952 小时前
HTML元素周期表
前端·html
一只一只妖5 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟7 小时前
js闭包问题
开发语言·前端·javascript