精华内容
下载资源
问答
  • vue动态添加样式
    千次阅读
    2021-12-15 14:29:58

    一、动态添加class的方法

    1. 根据数据长度判断是否展示类名
    <div :class="item.length > 3?'active':''></div>
    
    1. 定义data,添加class及style
    <div :class="styleList[item.xxx].hovers"  :style="{color:styleList[item.xxx].color}">
    	<img :src="styleList[item.xxx].src">
    </div>
    styleList:{
    	success:{hovers:"bover_success",color:"#008a7c",src:require('@/style/image....')},
    	failure:{hovers:"bover_failure",color:"#cc0001",src:require('@/style/image....')},
    	aborted:{hovers:"bover_aborted",color:"#ff9c00",src:require('@/style/image....')},
    }
    
    1. 动态添加是否禁止点击的样式
    <div :class={'i-disabled':scope.row.disabledBtn }></div>
    
    .i-disabled{cursor:not-allowed}
    
    更多相关内容
  • vue 动态添加样式

    万次阅读 2018-06-15 14:51:02
    vue实现点击切换改变样式 html代码:根据数据动态循环一个列表 &lt;ul&gt; &lt;li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':...

    vue实现点击切换改变样式

    html代码:根据数据动态循环一个列表

    <ul>
        <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
    </ul>

    js代码:

    export default {
        data(){
            return{
                dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
                clicked:0   //标识,初始化默认选中第一项
            }
        },
        methods:{
            changeTab(index){
                this.clicked = index;
            }
        }
    }

    css样式,点击选中添加黑色边框

    .bor{
       border:2px solid black;
    }

    效果:
    这里写图片描述

    展开全文
  • 28-vue基础:vue动态添加style样式

    千次阅读 2022-02-11 09:43:19
    vue基础:绑定属性class,绑定style

    注意:

    • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如
    • backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff

    【对象】

    • html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
    • html :style="{color:(index==0?conFontColor:’#000’)}"

    【数组】

    • html :style="[baseStyles, overridingStyles]"
    • html :style="[{color:(index==0?conFontColor:’#000’)},{fontSize:‘20px’}]"

    【三目运算符】

    • html :style="{color:(index==0?conFontColor:’#000’)}"
    • html :style="[{color:(index==0?conFontColor:’#000’)},{fontSize:‘20px’}]"

    【多重值】

    此时,浏览器会根据运行支持情况进行选择

    • html :style="{ display: [’-webkit-box’, ‘-ms-flexbox’, ‘flex’] }"

    【绑定data对象】

    • html :style=“styleObject”
    data() {
        return{
          styleObject: {
            color: 'blue',
            fontSize: '16px'
          }  
        }
    }
    

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

    展开全文
  • 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动态添加style样式的几种写法

    万次阅读 2021-12-09 10:12:59
    项目中可能会需要动态添加 style 行内样式,但是在长期维护的项目里面,尽量要避免使用。 注意: 1、凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成fontSize。 2、除了绑定值,其他的属性名的值要用引号...
  • vue常用指令以及动态添加样式

    千次阅读 2020-11-09 21:05:43
    Vue的指令是以v-开头的,作用于页面中的元素,所以需要将指令绑定与元素中,从而达到给绑定的元素添加行为的目的。 ​ 语法:<元素标签 v-指令 = “表达式”> 1.v-text 用于更新标签包含的文本,它的作用跟双...
  • 在做pc或者移动端的时候 通常会遇到一些 由后台返回的数据 动态改变页面的样式(ps:ul>li动态设置宽度) <div class="personVlaue"> <div :class="vipLevel!=0?'merbercolor':'ordercolor'">0&...
  • 一款bootstrap风格样式的很实用的vue动态添加删除表格数据代码,输入用户名和年龄自由添加用户信息表格,可以删除用户信息,支持批量全部删除表格数据。
  • vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换。案例中将通过使用:class设置 字体为红色。 1、新建一个html代码页面。 2、在html代码页面创建一个同时添加id为app...
  • vue动态控制样式

    千次阅读 2022-05-11 09:35:29
    vue项目开发中,我们经常会通过给元素动态添加动态样式以实现选中的效果。通过动态添加style和class达到动态更改样式的效果。 一、动态添加class名
  • 如何利用VUE动态添加class样式

    千次阅读 2020-11-02 20:33:42
    看注释, 就可以理解原理 <body> <!-- 需求, 在每次点击li的时候, 当前的li添加class, 其余的li删除class -->...-- :class="{'red':index==current}" 动态绑定class, 并且进行判断, 当
  • vue动态绑定style样式动态添加style样式的多种写法
  • vue: 动态添加样式

    千次阅读 2020-12-20 13:22:20
    vue如何操作html模版,使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式------------------------ 动态class------------------...
  • Vue动态绑定样式

    千次阅读 2021-12-26 18:47:40
    对于vue.js动态绑定class样式,看了一些网上的帖子发现整理的都不太完整,特地好好整理了一下,由于都在学习中,有啥疑问、问题欢迎指正,一起来学习吧。 第一种情况: 适用于样式的类名不确定,需要动态的指定 ...
  • 主要介绍了vue中v-for循环选中点击的元素并对该元素添加样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue实现点击追加选中样式效果,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 组件中添加样式不生效的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue动态改变元素样式详解

    千次阅读 2022-06-16 00:30:41
    vue设置样式变量,以在vue动态改变元素样式,包含动态改变class以及内联样式style等。实现vue动态控制页面样式
  • 如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 ...补充知识:vue 根据变量值来判断显示class 我就废话不多说了,大家还是直接看代码吧~ <div :class=”[‘bottom-btn’,{‘face-btn’:type==’
  • vue动态更改元素样式

    千次阅读 2021-11-29 08:53:40
    vue项目开发中,好多地方需要动态去改变元素的样式,例如:更改元素class名去更换元素的样式,或更改元素的style去更改元素样式。元素的显示、隐藏、大小、颜色等,也可以配合vuex使用实现类似主题话的更改。 一...
  • Vue设置动态样式

    2022-03-08 09:31:25
    }, }, //active设置动态样式 //style动态样式 data() { return { num: 0, arry: [ ["一张图", require("./image/yizhangtu.svg")], ["项目可视化", require("./image/keshihua.svg")], ["项目审核", require("./...
  • active 写css样式 data 中activeIndex =0 组件上添加:class=’[activeIndex ==index : ‘active’? ‘’]’
  • 06、VUE动态样式的设置

    千次阅读 2022-03-07 16:03:42
    在原生的JavaScript中我们要给一个元素设置动态样式需要我们利用添加类名和移除类名的方法来设置, 在vue中我们可以有效的利用v-bind指令来设置动态样式。 1、动态class 【语法】: :class="{类名: 布尔值}" ...
  • vue如何动态的绑定style样式

    千次阅读 2020-07-08 12:06:10
    ,'font-size': '14px'}" :class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_... // style 中的任何属性都可以通过此方式去动态绑定 去修改值 ```javascript data() { return { cNodeColor: '#008ecf', }; },
  • 可以使用三元表达式 ,...除了动态添加的类名,再加上一个固定的类名的写法,满足条件动态添加类1,不满足条件,不动态添加类。(因为第二个位置为空) <div :class="[条件 ? '类1' : '','确定一定会使用的类名'].

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,225
精华内容 28,490
关键字:

vue动态添加样式