精华内容
下载资源
问答
  • vue动态绑定多个样式

    千次阅读 2019-12-25 14:21:18
    vue动态绑定多个样式 在项目开发的过程中遇到这样一个需求:有一个节点的状态的显示,使用了element的时间线的组件,但是这个节点的状态有十几种,不同的状态有不同的显示方式,也就是说动态绑定样式。 1、一开始的...

    vue动态绑定多个样式

    在项目开发的过程中遇到这样一个需求:有一个节点的状态的显示,使用了element的时间线的组件,但是这个节点的状态有十几种,不同的状态有不同的显示方式,也就是说动态绑定样式。

    1、一开始的想法

    这原本不复杂,但是由于样式太多(十几种),一堆都写在标签内的话,代码非常的不美观,因此想用一个好一点的方式去实现。
    使用:style="{color:item.color}"遍历的方法动态的绑定样式,但是后端接口返回的数据里是没有节点的color的属性的,因此需要在获取到值之后遍历一遍,根据不同的状态塞入不同的颜色值。
    但是写完之后问题来了,颜色并没有改变,检查元素发现,内联样式已经成功动态加上去了。
    在这里插入图片描述
    但是由于这个组件内的子元素设置了样式,覆盖掉了父元素的内联样式,但是该子元素的样式是element默认的,在index.css里,无法修改,需要使用 /deep/ 来修改,因此动态绑定内联样式这种方法行不通。

    2、动态绑定class

    动态绑定class的写法是:class="{‘activeClass’: activeName}",但是对于有实际中颜色的动态样式来说,将代码都写在html里是代码是非常不美观的,因此,最后产生了这样的写法。
    在这里插入图片描述
    1、首先在template里这样写,item是遍历的每一个元素为了在方法里可以拿到每个节点的状态。
    2、在methods里写方法然后根据不同的状态返回不同的class。

    methods: {
        // 动态绑定选项的样式
        switchClass (item) {
          return {
            "success-node-timeline": item.state === "SUCCESS",
            "failure-node-timeline": item.state === "FAILURE",
            "submitsuccess-node-timeline": item.state === "SUBMITTED_SUCCESS",
            "runningexeution-node-timeline": item.state === "RUNNING_EXEUTION",
            "redaypause-node-timeline": item.state === "READY_PAUSE",
            "pause-node-timeline": item.state === "PAUSE",
            "redaystop-node-timeline": item.state === "READY_STOP",
            "stop-node-timeline": item.state === "STOP",
            "needfaulttoerance-node-timeline":
              item.state === "NEED_FAULT_TOLERANCE",
            "kill-node-timeline": item.state === "KILL",
            "waittingthread-node-timeline": item.state === "WAITTING_THREAD",
            "waittingdepend-node-timeline": item.state === "WAITTING_DEPEND"
          };
        },
    }
    

    但是这种方法还是感觉不是最好的实现方法,感觉可能会有更好的方法,如果大家有更好的方法,欢迎评论区评论交流呀~

    展开全文
  • 解决方法: <div v-for="(item,index) in posdata" :key="index" :class="[{on:index==active(判断条件)},item.class]" class="fade"> posdata: [ {class:'class1'}, {class:'class2'}, ...

    解决方法:

    <div v-for="(item,index) in posdata" :key="index" :class="[{on:index==active(判断条件)},item.class]" class="fade">
    posdata: [
        {class:'class1'},
        {class:'class2'},
        {class:'class3'},
    ],

    将他们各自的class写在posdata里

    <style>

    .on{
    }
    .class1{
    }
    .class2{
    }
    .class3{
    }

    </style>

    展开全文
  • vue多个元素的样式选择器 三目运算符只能进行两个的选择判断,多个选择就很难受了。 废话少说,直接上源码。 首先获取它的索引,通过索引来判断样式 // 索引key判断 <div class="carborder" v-for="(value, ...

    vue多个元素的样式选择器

    三目运算符只能进行两个的选择判断,多个选择就很难受了。

    废话少说,直接上源码。

    首先获取它的索引,通过索引来判断样式

    // 索引key判断
    <div class="carborder" v-for="(value, key) in mycarinfo" :key="key">
    
                    <router-link
                    :class="rcar[key]"
                        to="/payment"
                    >
                        我是什么颜色
                    </router-link>
                </div>
    

    在data里面定义元素的样式 数组格式

    // 数组格式
    data() {
            return {
                rcar:[
                    "rcar",
                    "rcar2",
                    "rcar3",
                    "rcar4",
                    "rcar5",
                ]
            };
    

    下面就是css写自己的样式了

    // 自己的样式
    .rcar {
        background-color: #1388ef;
    }
    .rcar2 {
        background-color: #a0a0a0;
    }
    .rcar3 {
        background-color: #282828;
    }
    .rcar4 {
        background-color: #efc313;
    }
    .rcar5 {
        background-color: #b9bab9;
    }
    

    一气呵成,完事收摊。
    妈妈再也不用担心啦。

    展开全文
  • 主要介绍了vue多个元素的样式选择器问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在做pc或者移动端的时候 通常会遇到一些 由后台返回的数据 动态改变页面的样式(ps:ul>li动态设置宽度) <div class="personVlaue"> <div :class="vipLevel!=0?'merbercolor':'ordercolor'">0&...

    在做pc或者移动端的时候 通常会遇到一些 由后台返回的数据 动态改变页面的样式(ps:ul>li动态设置宽度) 

    <div class="personVlaue">
      <div :class="vipLevel!=0?'merbercolor':'ordercolor'">0</div>
      <div v-for="(item,i) in vipLevelSettingBeanList" :class="[i==0?'borderlefts':'borderrights',item.level<=vipLevel?'merbercolor':'ordercolor',item.level==vipLevel?'merberbg':'orderbg']" :style="'width:'+memberWidth+'%'" :key="i" class="mermberValue">
          <p :class="i==0?'borderleft':'borderright'"></p>
           <span v-if="i==0">{{item.level}}</span>
           <span v-else>V{{item.level}}</span>
      </div>
    </div>

     

    展开全文
  • 在开发过程中,很时候都会用到动态的计算的样式,比如宽度,高度。特别是开发后台管理系统。 那么首先你务必看Vue的官方文档。涉及到的基础知识有: 绑定内联样式的使用 computed的使用 文档写的都是基础使用。...
  • vue实现点击动态更换样式

    千次阅读 2019-08-28 14:12:45
    vue有一很大的优点就是不用操作dom,极大的提高了性能,就像下面的实现点击动态绑定样式功能,相比js和jq就精简了很。 html: <div class="type_div"> <span class="type_item" :class="{ ...
  • Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来...我们可以为 v-bind:class 设置一对象,从而动态的切换 class: 实例中将 isActive:true 显示了一绿色的 div 块.
  • 可以使用三元运算的方式,设置多个动态的class类的方法来解决,如下: 使用方式一: 使用三元运算多次判断绑定class: :class="a==1 ? 'class' : a==2 ? 'class1' : a==3 ? 'class3' : ' ' " 使用方式二: ...
  • vue: 动态添加样式

    千次阅读 2019-08-26 03:36:17
    vue如何操作html模版,使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式 ------------------------ 动态class------...
  • Vue动态改变样式实战

    千次阅读 2020-08-30 10:24:14
    2通过computed返回一个对象,对象里放着多个键值对。 3可以通过双向绑定改变样式。 二vue动态改变样式 1代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...
  • vue.js 动态设置样式

    千次阅读 2018-10-11 17:12:39
    控制多个样式: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue 测试实例&lt;/title&gt; &lt;...
  • 在组件内修改elementui样式需要...中要修改多个elementui的样式时,只需要将其作为::v-deep的子类就可以了 <style lang="scss" scoped> ::v-deep { .el-table {} .el-input {} .el-button {} } </st..
  • Vue样式动态绑定

    千次阅读 2019-08-17 17:11:46
    Vue样式Vue 中使用样式; 一、使用class样式: 类名必须用引号 引起来; 1、数组 <h1 :class = "['类名1','类名2']">这种方法 需要用 v-bind: => : 绑定 2、数组中使用三元表达式 <h1 :class = "['...
  • vue 数据绑定-动态样式

    千次阅读 2018-04-04 09:33:54
    vue 数据绑定-动态样式 动态class名绑定的几种方式 1. 对象方式 new Vue({ el: '#root', template: `&lt;div :class="{active: isActive"&gt;&lt;/div&gt;`, data () { return { ...
  • Vue给标签动态绑定样式class或者style

    千次阅读 2020-07-02 21:05:02
    我的项目中实际使用的是vue+element ui :class :class等同于 v-bind:class 借用Vue官网的解释: <div v-bind:class="[active: isActive ]"></div>...你可以在对象中传入更字段来动态切换
  • vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较,需要动态添加的class也比较,这时候其实也很简单。详细看代码 <template> <div class="app" :class=...
  • Vue元素绑定多个样式

    千次阅读 2019-03-28 21:16:37
    v-bind:class="[{'bck':ind1 === index},item.class]
  • vue动态组件 <component :is="iscomponent"></component> import recordIn from './record-in' import recordMove from './record-move' import recordUse from './record-use' export default { ...
  • vue 删除数组元素.vscode 打开多个文件夹。vue 单页面 刷新 不同 样式vue 获取dom元素.pdf
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • vue 动态的修改样式

    2020-06-15 17:01:30
    需要为元素配置ref属性 el按钮 2.... 在操作时,如果需要写很样式,可以使用style.cssText='xxxx',如果是单独设置某一属性,可以直接使用style.xxx来实现,同时,修改方法需要在钩子函数mouted完全挂载的时候。
  • 这里默认所有图表样式一致,都为柱状图,如需其他类型,可查阅echarts官网文档,再动态传值即可。 vue 使用组件 ——在外层用v-for 循环,传不同值进charts 即可 <!-- 传入对应的数据给子组件 --> id='...
  • 有关于vue解决动态绑定多个class问题

    千次阅读 2019-12-08 20:15:53
    操作元素的 class 列表和内联样式是数据绑定的一常见需求。因为它们都是属性,所以我们可以用v-bind/:处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class...
  • 今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue中选中多个选项并且改变选中的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue绑定多个class 三元运算符 多个条件限制 在v-for循环中,根据需求,前3条添加不一样的样式。 第一个第二个第三个分别是不同的样式 <div v-for="(item, index) in msgList" :key="index" :class="[index==0...
  • vue动态添加style的样式

    千次阅读 2020-04-20 19:06:12
    vue动态添加style样式的时候,有以下注意点 1.凡是有-的style属性名都要变成驼峰式,比如font-weight,需要写成fontWeight 2.除了绑定值,其他属性名的值要用引号括起来,比如width:‘75px’,不要忘记引号 3.动态...
  • vue动态添加样式 :style 和 :class

    万次阅读 2019-03-05 15:11:28
    但是在一长期维护的项目里面:style行内样式尽量避免。 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一参数 类名, 第二参数:bo...
  • Vue 实现改变当前点击Class 样式、改变多个点击Class样式 实例 解析 文章概览 1:改变当前点击class 样式 2:改变多个点击class 样式 一、改变当前点击Class样式 实现思路::class 动态判断样式 实例 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,554
精华内容 23,421
关键字:

vue多个动态样式

vue 订阅