• 【Vue】v-bind对样式控制的增强-操作class


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

    一、语法

    语法

    <div> :class = "对象/数组">这是一个divdiv>
    

    对象语法

    当class动态绑定的是对象时,键就是类名,值就是布尔值,如果值是true,就有这个类,否则没有这个类

    <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }">div>
    

    ​ 适用场景:一个类名,来回切换,eg:tab栏


    数组语法

    当class动态绑定的是数组时 → 数组中所有的类,都会添加到盒子上,本质就是一个 class 列表

    <div class="box" :class="[ 类名1, 类名2, 类名3 ]">div>
    

    使用场景:批量添加或删除类


    二、示例代码

    <body>
    
      <div id="app">
        <div class="box" :class="{ pink: true, big: true }">黑马程序员div>
        
        <div class="box" :class="['pink', 'big']">黑马程序员div>
      div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
    
          }
        })
      script>
    body>
    

    三、京东秒杀-tab栏切换导航高亮

    需求

    ​ 当我们点击哪个tab页签时,哪个tab页签就高亮

    思路

    1.基于数据,动态渲染tab(v-for)

    2.准备一个下标 记录高亮的是哪一个 tab

    3.基于下标动态切换class的类名

    代码

    <body>
      <div id="app">
        <ul>
          <li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index">
            
            <a :class="{ active: index === activeIndex }" href="#">{{ item.name }}a>
          li>
        ul>
      div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            activeIndex: 2, // 记录高亮
            list: [
              { id: 1, name: '京东秒杀' },
              { id: 2, name: '每日特价' },
              { id: 3, name: '品类秒杀' }
            ]
          }
        })
      script>
    body>
    

    四、v-bind对有样式控制的增强-操作style

    语法

    
    <div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }">div>
    
    <div class="box" :style="{ CSS属性名1, CSS属性名2 }">div>
    

    强大的地方在于,它可以控制单个属性,而不是直接添加某个类

    代码示例

    <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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            percent: 30
          }
        })
      script>
    body>
    

    五、进度条案例

    <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>
    
    <<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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
    
            }
        })
    script>
    
  • 相关阅读:
    2022爱分析·智慧社区厂商全景报告 厂商征集
    github actions发布electron发布客户端踩坑过程
    k8s 1.22 ingress 变化
    上海亚商投顾:沪指放量反弹 两市超4500股飘红
    基于JAVA青岛滨海药店管理系统的设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署
    STM32——SPI通信
    《算法系列》之 数组
    Pytorch从零开始实现Vision Transformer (from scratch)
    谷粒学苑_第九天
    猿创征文丨赶紧进来!!!带你0距离全面接触 变量和常量
  • 原文地址:https://blog.csdn.net/qq_39921135/article/details/139454419