精华内容
下载资源
问答
  • 如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 ...补充知识:vue 根据变量值来判断显示class 我就废话不多说了,大家还是直接看代码吧~ <div :class=”[‘bottom-btn’,{‘face-btn’:type==’
  • Vue动态添加Class样式

    2021-03-12 20:12:51
    根据 data 里面定义的变量,动态渲染页面上的样式,使用三元运算解决。 class=“pastPersons > 0 ? ‘select’ : ‘’” <li class="pastPersons > 0 ? 'select' : ''"> <div class="left-div0306"&...

    随手记,经常用到。
    根据 data 里面定义的变量,动态渲染页面上的样式。

    • 使用三元运算解决:【class=“pastPersons > 0 ? ‘select’ : ‘’”】这里 pastPersons为 data 中定义的变量,’select‘ 为写好的样式类名
    <li class="pastPersons > 0 ? 'select' : ''">
      <div class="left-div0306">
        <i class="iconfont icon-qianyue"></i>
      </div>
      <div class="right-div0306">
        <h4 class="">6、<spring:message code="unite.center.visitor.labe8"/>
           ({{pastPersons}}/{{sum}})
        </h4>
      </div>
    </li>
    
    • 使用 :Class 动态绑定
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>vue之class动态绑定</title>
     <style>
       .classA {
         color: red;
       }
       .classB {
         background: blue;
       }
       .classC {
         font-size: 20px;
       }
     </style>
    </head>
    <body>
    
    
    <div id="demo">
     <h2>class绑定: :class='xxx'</h2>
     <p :class="myClass">class动态绑定的为 data 中定义的变量</p>
     <p :class="{classA: hasClassA, classB: hasClassB}">class动态绑定的是对象</p>
     <p :class="['classA', 'classB']">class动态绑定的是数组</p>
    
     <button @click="update">更新</button>
    
    </div>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
     new Vue({
       el: '#demo',
       data: {
         myClass: 'classA',
         hasClassA: true,
         hasClassB: false
       },
    
       methods: {
         update () {
           this.myClass = 'classB'
           this.hasClassA = !this.hasClassA
           this.hasClassB = !this.hasClassB
         }
       }
     })
    </script>
    </body>
    </html>
    
    • 使用 :style 动态绑定
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>vue之style绑定</title>
     <style>
       .classA {
         color: red;
       }
       .classB {
         background: blue;
       }
       .classC {
         font-size: 20px;
       }
     </style>
    </head>
    <body>
    
    
    <div id="demo">
     
     <h2>style绑定</h2>
     <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
    
     <button @click="update">更新</button>
    
    </div>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
     new Vue({
       el: '#demo',
       data: {
         activeColor: 'red',
         fontSize: '20px'
       },
    
       methods: {
         update () {
           this.activeColor = 'yellow'
           this.fontSize = '30px'
         }
       }
     })
    </script>
    </body>
    </html>
    
    展开全文
  • 今天小编就为大家分享一篇vue动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 动态添加class类名

    千次阅读 2020-09-09 14:40:45
    动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象...

     

    <template>
      <div>
        <h2>动态添加类名</h2>


        <!-- 第一种方式:对象的形式 -->
        <!-- 第一个参数 类名, 第二个参数:boolean值 -->
        <!-- 对象的形式: 用花括号包裹起来,类名用引号, -->
        <!-- 优点: 以对象的形式可以写多个,用逗号分开 -->
        <p :class="{'p1' : true}">对象的形式(文字的颜色)</p>
        <p :class="{'p1' : false, 'p': true}">对象的形式(文字的颜色)</p>


        <!-- 第二种方式:三元表达式 注意点:放在数组中,类名要用引号-->
        <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的颜色)</p>


        <!-- 第三种方式: 数组的形式 -->
        <p :class="[isTrue, isFalse]">数组的形式(文字的颜色)</p>

        <!-- 数组中用对象 -->
        <p :class="[{'p1': false}, isFalse]">数组中使用对象(文字的颜色)</p>


     <!--补充: class中还可以传方法,在方法中返回类名-->
     <p :class="setClass">通过方法设置class类名</p>
      </div>
    </template>

    <script>
      export default {
        data () {
          return {
            isTrue: 'p1',
            isFalse: 'p'
          };
        },

     method: {
     setclass () {
        return 'p1';
       }
     }
      }
    </script>
     

    展开全文
  • vue动态添加class的几种方式

    千次阅读 2019-08-22 02:12:23
    备注: 本文整理了vue动态添加class的几种方式 状态:已完成、待整合2019-08-22 p1,p为类名 【对象】 对象的形式: 用花括号包裹起来,类名用引号, 第一个参数 类名, 第二个参数:boolean值 优点: 以对象的形式...

    编写时间:2019-08-22
    更新时间:2019-08-22

    作者:鬼小妞

    备注: 本文整理了vue动态添加class的几种方式

    状态:已完成、待整合2019-08-22

    p1,p为类名

    【对象】

    对象的形式: 用花括号包裹起来,类名用引号,

    第一个参数 类名, 第二个参数:boolean值

    优点: 以对象的形式可以写多个,用逗号分开

    • html :class="{'p1' : true}"
    • html :class="{'p1' : false, 'p': true}"

    【数组】

    • html :class="['p1', 'p2']"
    • html :class="[{'p1':true}]"
    • html :class="[{'p1': false}, 'p2']"

    三元表达式

    注意点:放在数组中,类名要用引号

    • html :class="[ 1 < 2 ? 'p1' : 'p' ]"

    【返回方法】class中还可以传方法,在方法中返回类名

    • html :class="setClass"
    method: {
      setclass () {
            return 'p1';
          }
      }
      
    复制代码

    转载于:https://juejin.im/post/5d5df8016fb9a06b2766d1e6

    展开全文
  • 如下所示: <div class=status_button> 查岗 视频 <!-- 查岗部分显示影藏 --> <div class=check_button class=[this.flag?> <ul class=cl> 用xinhic</li>
  • vue动态添加class/vue点击li列表动态添加class 此案例适合一个元素里面包含多个类,‘menu-item active’:item.id==current,前面单引号的是对应要添加的类名,后面是添加条件。使用场景:列表点击时切换背景色、...

    vue动态添加class/vue点击li列表动态添加class

    此案例适合一个元素里面包含多个类,‘menu-item active’:item.id==current,前面单引号的是对应要添加的类名,后面是添加条件。使用场景:列表点击时切换背景色、图片、图标等。

    <li v-for="item in nav" :key="item.id"  :class="{ 'menu-item active':item.id==current,'menu-item':item.id!=current}" @click="addactive(item.id)">
            <router-link :to="/home/+item.url">{{ item.navname }}</router-link>
          </li>
    
    <script>
    export default {
      name: 'MyAside',
      data () {
        return {
          current: 0,
          nav: [
            { id: 0, url: 'users', navname: '用户管理' },
            { id: 1, url: 'rights', navname: '权限管理' },
            { id: 2, url: 'goods', navname: '商品管理' },
            { id: 3, url: 'orders', navname: '订单管理' },
            { id: 4, url: 'settings', navname: '系统设置' }
    
          ]
        }
      },
      methods: {
        // 动态添加类
        addactive (index) {
          this.current = index
        }
      }
    }
    </script>
    

    笔者也是在学习大军中,此仅做笔记方便日后查阅,如有错漏请不吝赐教,非常感谢!

    展开全文
  • 如何利用VUE动态添加class样式

    千次阅读 2020-11-02 20:33:42
    看注释, 就可以理解原理 <body> <!-- 需求, 在每次点击li的时候, 当前的li添加class, 其余的li删除class -->...-- :class="{'red':index==current}" 动态绑定class, 并且进行判断, 当
  • 如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 ...:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.st...
  • vue 动态添加class

    千次阅读 2018-10-10 11:56:30
    第一步: &lt;div class="noticePage"...fixTitle是当达到某种条件时动态添加class名,whether是判断是否 第二步: 在data里面 data(){ return{ whether:false } } 第三步: 在...
  • 主要介绍了vue.js实现点击后动态添加class及删除同级class的相关资料,需要的朋友可以参考下
  • :class="{'active': activeTab === index}" 突然遇到比较复杂的需求,比如根据客户类型展示不一样的样式(有很多种客户类型,每个都不一样) 以前百度看到有很多种方法,都没有一一去尝试,直到自己需要用的时候才...
  • vue动态添加class(active)的方法大全

    千次阅读 2020-03-29 19:22:42
    vue项目中如何点击元素动态添加active-class?今天来分享多种解决方式。 一. v-for循环情况下动态添加: 1.v-for循环元素,绑定key 2.在data中创建标识isActive=0,这是为了初始化第一个标题为active 3.监听单击事件...
  • vue动态添加class类进行显示隐藏

    万次阅读 2018-06-25 16:45:02
    div class="status_button"&gt; &lt;el-button type="success" @click="checkSite" &gt;查岗&lt;/el-button&gt; &lt;el-button type="danger"
  • vue动态添加class

    千次阅读 2017-07-25 17:27:50
    样式表 ...效果样式表/* 表格 - 行 - 已登记状态 */ .registered { background-color: #FFF9E5; } /* 表格 - 行 - 未登记hover状态 */ .unregistered:hover { ...}HTML<tr class="gl_tr_wrap" v-bind:class
  • Vue动态添加class写法 动态静态clas混合 示例 //fx,cont-block为静态class ob为动态class <div :class="[ 'fx','cont-block',{ob : index == '0'}]" v-for="(item,index) in objData" @click=...
  • Vue点击动态添加Class

    万次阅读 2019-04-22 10:13:06
    1.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1,// 0为默认选择第一个,-1为不选择 list: [ {title: '全网搜索(100w+)'}, {title: '优惠推荐(包邮10w+)'}, ], ...
  • 函数里能获取到li的index下标,但是class切换没有效果 HTML代码: ​ <ul class="menuUl"> <li v-for="(li,index) in lis" @click="SelectLi(index)" :class="{isSelectedLi:SelectedLi===index}" :key=...
  • <div class="item" :class="{'active':active}" v-for="(item, index) in contents" :key="index" > data () { return { active: false} },
  • 最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能,这个...我们使用vue的:class来进行class的绑定。:class=”`comment-stars-width`+s.score” 然后把前面需要的属性前缀用 “包裹起来,后面的值用+号连起来,这
  • VUE 动态绑定class

    千次阅读 2019-10-12 12:07:01
    //isActive 是在data里面布尔值, rotateRight 是 class 样式类 //isActive 为true时样式类 rotateRight 生效 <div :class="{rotateRight:isActive}">abs</div> 第二种:通过三元运算符判断使用哪个...
  • Vue动态添加多个class

    千次阅读 2019-05-09 18:55:15
    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加class也比较多,这个时候其实也很简单 <template> <section class="p-10 cursor-pointer...
  • vue动态绑定class属性

    2021-01-21 18:23:18
    <div :class="{color:scope.row.state == null || scope.row.state.toLowerCase() === 'error'}">{{scope.row.state}}</div> .color { color: #ea5151e8; }
  • vue动态绑定class时遇到的问题

    千次阅读 2018-02-22 10:18:00
    本来想实现动态绑定class,却发现了很奇怪的问题,代码如下 从代码看,是个很简单的逻辑, 通过button点击变色,使data中的值改变,从而给div绑定新的class,因为在真正的项目中click是一个ajax请求,为了制造...
  • vue动态绑定class,tab切换非常好用

    千次阅读 2018-06-07 13:46:16
    v-bind:class="{'decoration-line':showLeft}" class="col-xs-6 col-md-6 text-center theme-color item"&gt; 排班信息 &lt;/div&gt; &lt;div @click="tab('right')&...
  • 1.使用:class给元素添加动态值 <span class="pdl-10" :class="addClass(value)"> {{value<0?-(value):value}} </span> methods: { addClass(diffValue){ if(diffValue>0){ return "arrow_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 101,626
精华内容 40,650
关键字:

vue动态添加class

vue 订阅