Vue中v-bind对样式控制的加强—(详解v-bind操作class以及操作style属性，附 ...

自由的羽毛  论坛元老 | 2024-10-21 15:22:48 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1956|帖子 1956|积分 5868

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
v-bind对样式控制的加强

2.1 操作class

2.1.1 语法

  1. <div> :class = "对象/数组">这是一个div</div>
复制代码
2.1.2 对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，假如值是true，就有这个类，否则没有这个类
  1. <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
复制代码
适用场景：一个类名，往返切换
2.1.3 数组语法

当class动态绑定的是数组时 → 数组中全部的类，都会添加到盒子上，本质就是一个 class 列表
  1. <div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
  3. <div class="box" :class="[ '类名1', '类名2', '类名3' ]"></div>
复制代码
利用场景:批量添加或删除类
2.1.4 利用

  1. <style>
  2.         .box {
  3.             width: 50px;
  4.             height: 50px;
  5.             border: 1px solid #000;
  6.             margin-top: 5px;
  7.         }
  8.         .red {
  9.             background-color: red;
  10.         }
  11.         .big {
  12.             width: 100px; height: 100px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="app">
  18.         <div class="box" :class="{ big: true, red: true }">
  19.           你好Java
  20.        </div>
  21.         <div class="box" :class="['red', 'big']">
  22.           你好Java
  23.         </div>
  25.    </div>
  26.     <script src="js/vue.js"></script>
  27.     <script>
  28.         const app = new Vue({
  29.             el: '#app',
  30.             data: {
  32.             }
  33.         })
  34.     </script>
  35. </body>
复制代码
2.1.5 Test

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         ul {
  7.             display: flex;
  8.             border-bottom: 2px solid #1e3c9f;
  9.             padding: 0 10px;
  10.         }
  11.         
  12.         li {
  13.             width: 100px;
  14.             height: 50px;
  15.             line-height: 50px;
  16.             list-style: none;
  17.             text-align: center;
  18.         }
  19.         li a {
  20.             display: block;
  21.             text-decoration: none;
  22.             font-weight: bold;
  23.             color: #333333;
  24.         }
  25.         li a.active {
  26.             background-color: #12e06f;
  27.             color: #fff;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div id="app">
  33.         <ul>
  34.             <li v-for="(item ,index) in list" :key="item.id" @click="activeIndex = index">
  35.                 <a href="#" :class="{active: index === activeIndex}">{{item.name}}</a>
  36.             </li>
  37.         </ul>
  38.     </div>
  39.     <script src="js/vue.js"></script>
  40.     <script>
  41.         const app = new Vue({
  42.             el: '#app',
  43.             data: {
  44.                 activeIndex: 0, // 记录高亮
  45.                 list: [{
  46.                     id: 1,
  47.                     name: '商品秒杀'
  48.                 }, {
  49.                     id: 2,
  50.                     name: '特价处理'
  51.                 }, {
  52.                     id: 3,
  53.                     name: '品牌优惠'
  54.                 }]
  55.             }
  56.         })
  57.     </script>
  58. </body>
复制代码
2.2 操作style

2.2.1 语法

:style中的css属性会覆盖 class="box"的css样式
  1. <div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
复制代码
2.2.2 利用

  1. <style>
  2.         .box {
  3.             width: 50px;
  4.             height: 50px;
  5.             background-color: red;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11.     <div id="app">
  12.         <div class="box" :style="{ width: '100px', height: '100px', backgroundColor: 'green' }">
  13.        </div>
  14.     </div>
  15.     <script src="js/vue.js"></script>
  16.     <script>
  17.         const app = new Vue({
  18.             el: '#app',
  19.             data: {
  21.             }
  22.         })
  23.     </script>
  24. </body>
复制代码
2.2.3 Test

  1. <style>
  2.         .progress {
  3.             height: 25px;
  4.             width: 400px;
  5.             border-radius: 15px;
  6.             background-color: #272425;
  7.             border: 3px solid #272425;
  8.             box-sizing: border-box;
  9.             margin-bottom: 30px;
  10.         }
  11.         
  12.         .inner {
  13.             width: 50%;
  14.             height: 20px;
  15.             border-radius: 10px;
  16.             text-align: right;
  17.             position: relative;
  18.             background-color: #409eff;
  19.             background-size: 20px 20px;
  20.             box-sizing: border-box;
  21.             transition: all 1s;
  22.         }
  23.         
  24.         .inner span {
  25.             position: absolute;
  26.             right: -20px;
  27.             bottom: -25px;
  28.         }
  29.     </style>
  30. </head>
  32. <body>
  33.     <div id="app">
  34.         <!-- 外层盒子底色 （黑色） -->
  35.         <div class="progress">
  36.             <!-- 内层盒子 - 进度（蓝色） -->
  37.          <div class="inner" :style="{ width: percent+'%' }">
  38.                 <span>{{ percent }}%</span>
  39.             </div>
  40.         </div>
  41.         <button @click="percent = 25">设置25%</button>
  42.         <button @click="percent = 50">设置50%</button>
  43.         <button @click="percent = 75">设置75%</button>
  44.         <button @click="percent = 100">设置100%</button>
  45.     </div>
  46.     <script src="js/vue.js"></script>
  47.     <script>
  48.         const app = new Vue({
  49.             el: '#app',
  50.             data: {
  51.                 percent: 30
  52.             }
  53.         })
  54.     </script>
  55. </body>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

自由的羽毛

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表