精华内容
下载资源
问答
  • vue 动态样式 万次阅读
    2019-04-26 21:45:00
    <p :style="{width:'4px',height: '24px',background: '#f7ce51'}"></p>
    <p:style="{height: '400px','overflow-y': 'auto','background-color': '#f3f3f3',padding: '15px'}"></p>
    
    三元运算符判断
    <div :style="{ 'opacity': !editableCheckNum ? 0.5 : 1 }">555</div>
    
    动态设置class
    <div :class="activeMachineId === machineItem.machineId?'activeStyle':'machineBar'" v-for="(machineItem,machineIndex) in machineList" @click="clickMachineEvent">
        <p>{{machineItem.name}}</p>
        <p :style="machineStatusStyle(machineItem.status)"></p>
    </div>
    
    
    方法判断
    <div class="machineBigBar machineList">
        <div class="machineBar" v-for="(machineItem,machineIndex) in processItem.machineList" :key="machineIndex">
            <p>{{machineItem.name}}</p>
            <p :style="machineStatusStyle(machineItem.status)"></p>
        </div>
    </div>
    
     
    methods:{
        machineStatusStyle(e){
            console.log('值',e)
            if(e === 1){
                return {
                    width:'14px',height:'16px',
                    background:"url('/src/images/time.png') no-repeat center",
                    marginLeft: '10px'
                }
            }else if(e === 2){
                return {
                    width:'14px',height:'16px',
                    background:"url('/src/images/time.png') no-repeat center",
                    marginLeft: '10px'
                }
            }else if(e === 3){
                return {
                    width:'14px',height:'16px',
                    background:"url('/src/images/time.png') no-repeat center",
                    marginLeft: '10px'
                }
            };
        }
    }
    

      

    转载于:https://www.cnblogs.com/web-zqk/p/10776797.html

    更多相关内容
  • 主要介绍了vue中如何实现样式之间的切换及vue动态样式的实现方法,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
  • 使用 vue 动态为元素生成样式, css 趣味样式生成, 样式实时生成, 可自行更改css样式改成自己想要的效果
  • Vue动态样式

    2021-10-19 17:47:09
    一、动态样式 作用:使用声明式变量来控制class、style的值。 1.class动态样式绑定 静态class样式 <h2 class='box'>静态的class样式</h2> 普通变量形式 <h2 :class='cc'>动态的class样式<...

    一、动态样式

    作用:使用声明式变量来控制class、style的值。

    1.class动态样式绑定

    1. 静态class样式
    <h2 class='box'>静态的class样式</h2>
    
    1. 普通变量形式
     <h2 :class='cc'>动态的class样式</h2>
    
    1. 字符串拼接语法
    <h2 :class='`box ${cc} ${ff}`'>动态的class样式(字符串拼接语法)</h2>
    
    1. 数组语法
      每个表达式都要求返回一个已经定义过的css类
    <h2 :class='["box", `${cc}`, ff, createCC(), true?"c3":"c2"]'>动态的class样式(数组语法)</h2>
    
    1. 对象语法
    <h2 :class='{
          box: true,
          [`${cc}`]: true,
          [ff]: fBol,
          [createCC()]: true,
          c3: cBol,
          c2: !cBol
        }'>动态的class样式(对象语法)</h2>
    

    2.style动态样式绑定

    1. 静态的style样式
    <h2 style='color: red;font-size:20px;'>静态的style样式</h2>
    
    1. 字符串拼接
    <h2 :style='`color:${"red"};fontSize:20px;`'>动态的style样式(字符串拼接语法)</h2>
    
    1. 普通变量
    <h2 :style='s1'>动态的style样式</h2>
    
    1. 数组语法
      数组中的每个对象都是“css属性:css属性值”构成的对象。
    <h2 :style='[
          {color:"red",fontSize:"20px"},
          {color: co, ["font-size"]: `${fz}px` },
          {[`margin-${margin}`]: `${size}px`},
          createSS()
        ]'>动态的style样式(数组语法)</h2>
    
    1. 对象语法
    <h2 :style='{
          color: co,
          fontSize: `${fz}px`,
          [`margin-${margin}`]: `${size}px`,
          ...createSS()
        }'>动态的style样式(对象语法)</h2>
    
    展开全文
  • vue 动态样式绑定

    千次阅读 2021-07-28 11:38:17
    1. 原始样式 <template> <div id="app"> <h1>示例1 属性绑定</h1> <div class="myStyle">测试</div> </div> </template> <script> export default { ...

    方式一:属性绑定

    1. 原始样式

    <template>
      <div id="app">
        <h1>示例1 属性绑定</h1>
        <div class="myStyle">测试</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
    };
    </script>
    
    <style>
    .myStyle {
      margin: 10px;
      padding: 5px;
      width: 200px;
      height: 100px;
      background: aquamarine;
      border: 1 #000 solid;
    }
    </style>
    

    dynamic_css.png


    2. 绑定按钮响应属性

    (1)基础版

    <div :class="{ myStyle: true }">测试</div>

    通过改变boolean值,来动态绑定

    (2)升级版

    <div :class="{ myStyle: m_changeColor }">测试</div>

    (3)按钮控制属性变化

    <div @click="{ m_changeColor = !m_changeColor; }" :class="{ myStyle: m_changeColor }">测试 </div>

    (4)完整代码

    <template>
      <div id="app">
        <h1>示例1 属性绑定</h1>
        <div @click="{ m_changeColor = !m_changeColor; }" :class="{ myStyle: m_changeColor }">测试 </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      data() {
        return {
          m_changeColor: true
        }
      }
    };
    </script>
    
    <style>
    .myStyle {
      margin: 10px;
      padding: 5px;
      width: 200px;
      height: 100px;
      background: aquamarine;
      border: 1 #000 solid;
    }
    </style>
    


    方式二:计算属性绑定

    1. 计算属性

      completed: {
        completeColor() {
          return { myStyle: this.m_changeColor };
        },
      },
    

    2. 完整代码

    <template>
      <div id="app">
        <h1>示例1 属性绑定</h1>
        <div @click=" { m_changeColor = !m_changeColor; }" :class="{ completeColor }" >测试</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      data() {
        return {
          m_changeColor: true
        }
      },
      completed: {
        completeColor() {
          return { myStyle: this.m_changeColor };
        },
      },
    };
    </script>
    
    <style>
    .myStyle {
      margin: 10px;
      padding: 5px;
      width: 200px;
      height: 100px;
      background: aquamarine;
      border: 1 #000 solid;
    }
    </style>
    
    

    展开全文
  • Vue动态样式你不会吗

    2021-11-20 21:21:36
    Vue动态样式 背景:在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的。本文总结一下自己用到的动态样式方法。 一、动态绑定 :style ????1.使用对象方式 通过v-bind:style来...

    Vue动态样式

    背景:在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的。本文总结一下自己用到的动态样式方法。

    一、动态绑定 :style

    👉1.使用对象方式

    通过v-bind:style来绑定style样式,“”引号里面使用对象的方式,为key,value形式,key值为css属性名,注意的是例如font-size,在key中要写成fontSize驼峰命名规则。value就是我们绑定的值,可以动态去改变。

    <h1 :style="{ color: Color ,fontSize:size+'px'}">浪漫主义码农</h1>

    例子:

    在这里插入图片描述

    代码:

    <template>
      <div>
        <h1 :style="{ color: Color ,fontSize:size+'px'}">浪漫主义码农</h1>
        <div class="btn">
          <el-button type="primary" @click="changeColor">点击切换颜色</el-button>
          <el-button type="primary" @click="Change_size">字体变大</el-button>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          Color:'blue',
          size:14
        };
      },
      methods:{
          changeColor(){
              this.Color='red'
          },
          Change_size(){
              this.size++
          }
      }
    };
    </script>
    

    也可以将所有的属性全部写在一个对象里面,最后在:style绑定这个对象就行,简化页面代码

    例如:

    <template>
      <div>
        <h1 :style="myStyle">浪漫主义码农</h1>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          myStyle: {
            fontSize: 40 + "px",
            color: "red",
          },
        };
      },
    };
    </script>
    

    在这里插入图片描述

    👉2.使用三目表达式

    通过布尔表达式来判断value值应该为什么,ifcolor为表达式,并使用圆括号将三目表达式包起来

    <h1 :style="{ color:(ifcolor?'red':'blue')">浪漫主义码农</h1>

    在这里插入图片描述

    👉3.使用数组方式

    :style="[{样式对象1},{样式对象2},…]"

    可以将多组样式对象应用到同一个元素上,但是如果有css属性相同,则后面的样式会覆盖前面的。

    例子:

    在这里插入图片描述

    <template>
      <div>
        <h1 :style="[styles1,styles2]">浪漫主义码农</h1>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          styles1: {
            backgroundColor: "red",
            "width": "300px",
          },
          styles2: {
            color: "#fff",
            height: "300px",
          }
        };
      },
    };
    </script>
    

    二、动态绑定 :class

    使用v-bind:class

    👉1. 使用对象方法

    :class="{类名1:布尔值1,类名2:布尔值2}" 当布尔值为true整个类生效,否则就不生效,class和:class并不冲突,因为class可以是很多个。写法也是相对的自由

    例子:

    在这里插入图片描述

    <template>
      <div>
        <p class="class1" :class="{class2:ifcolor,class3:true}">浪漫主义码农</p>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
            ifcolor:false,
        }
      },
    };
    </script>
    
    <style>
    div{
      margin-left: 100px;
    }
    
    .class1{
        background: #E6A23C;
        width: 100px;
        height: 100px;
    }
    
    .class2{
        color: red;
    }
    .class3{
        font-size: 30px;
        font-weight: 1000;
    }
    </style>
    

    👉2. 使用三目表达式

    我们使用三目运算符能够更加的灵活的,并简化对象方法的写法,,对象的写法我们需要一个变量去控制每一个类,使用三目运算符可以简化一点,我最常使用的是种形式。

    :class="布尔值 ? '类1' : '类2'"

    例子:

    在这里插入图片描述

    <template>
      <div>
        <h1 :class="ifcolor ? 'Red' : 'Pink'">“浪漫至死不渝,温柔绝对屈服”</h1>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          ifcolor: false,
        };
      },
      mounted() {
        setInterval(() => {
          this.ifcolor = !this.ifcolor;
        }, 1000);
      },
    };
    </script>
    
    <style>
    div {
      margin-left: 200px;
      margin-top: 200px;
    }
    .Red {
      font-size: 20px;
      color: red;
      animation: big 1s;
    }
    .Pink {
      font-size: 20px;
      color: pink;
      animation: small 1s;
    }
    @keyframes big {
      0% {
        font-size: 20px;
      }
      100%{
          font-size: 30px;
      }
    }
    @keyframes small {
      0% {
        font-size: 30px;
      }
      100%{
          font-size: 20px;
      }
    }
    </style>
    

    👉2. 使用数组方法

    和上面的style一样的使用

    :class="[class1, class2]"

    例子:

    在这里插入图片描述

    代码:

    <template>
      <div>
          <p :class="[classA,classB,classC]">今天毕业拍毕业照了</p>
      </div>
    </template>
    
    <script>
    export default {
        data(){
            return{
                classA:'one',
                classB:'two three',
                classC:'five'
            }
        }
    }
    </script>
    
    <style>
    div{
        margin-left: 200px;
        margin-top: 200px;
    }
    .one{
        background: pink;
    }
    .two{
        font-size: 30px;
    }
    .three{
        color: red;
    }
    .five::after{
        content: ",青春再见";
    }
    </style>
    

    写在最后

    要是有误的地方,欢迎大佬们评论指出。

    今天我们拍了毕业照。离别总是伤感的。我们和学校说再见,却不跟青春道别。

    💌 我们从五湖四海来,到天南海北去。

    💌 愿你以梦为马,永远随处可栖。

    一个心怀浪漫宇宙,也珍惜人间日常的码农

    微信图片_20211120212004.jpg

    展开全文
  • vue中我们可以有效的利用v-bind指令来设置动态样式。 1、动态class 【语法】: :class="{类名: 布尔值}" 【演示】: <template> <div> <p :class="{ color_red: bool }">我们来动态改变...
  • 本文要给大家介绍vue样式切换一级vue动态样式的使用教程,下面给大家带来几个小案列,需要的朋友可以借鉴研究一下。既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决。下面来说一...
  • 今天小编就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue动态样式绑定
  • 在我们做前端页面的时候...关键在于type的样式部分,我们利用vue样式绑定,结合三元表达式使用 :type=”{条件} ? {如果为真} : {否则}” 在代码中: <el-tag size=medium :type=scope.row.is_multiple === '否' ?
  • Vue动态绑定样式

    千次阅读 2021-12-26 18:47:40
    对于vue.js动态绑定class样式,看了一些网上的帖子发现整理的都不太完整,特地好好整理了一下,由于都在学习中,有啥疑问、问题欢迎指正,一起来学习吧。 第一种情况: 适用于样式的类名不确定,需要动态的指定 ...
  • vue动态样式绑定改变伪元素等特殊样式(css var函数)

    万次阅读 多人点赞 2020-01-21 11:24:49
    诸如在js中,我们根据某个条件,或者触发某个方法,去动态改变某个样式。 那么,在vue中,我们更能很轻松的达到这点。 看下常见的几种情景: 情景一:我们需要根据某个变量是否存在(触发),去动态添加样式 描述:...
  • 这个组件就是动态组件,它需要设置 is 属性。is 属性的值就是需要渲染的组件的名字 1. 引入vue链接: vue链接:https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js 2.创建组件(三个选项需要做三个小组件)。 ...
  • Vue动态改变样式实战

    千次阅读 2020-08-30 10:24:14
    一点睛 1通过给html元素的 class属性绑定...二vue动态改变样式 1代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue动态改变样式</title> <s...
  • 二、vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head>...
  • 28-vue基础:vue动态添加style样式

    千次阅读 2022-02-11 09:43:19
    vue基础:绑定属性class,绑定style
  • 主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片,需要的朋友参考下吧
  • Vue动态样式:class用法

    千次阅读 2020-10-24 14:40:41
    我们在做页面的时候,经常会用到动态样式,比如有3个按钮,选中了一个,选中那个样式变化,再选另一个,选的那一个样式变化,第一个又变成初始的样式,这个就叫做动态样式,一般用:class来实现。 1、首先定义一个...
  • vue动态修改样式 <template> <div class="main" :style="{ height: arpaHeight }" > <button class="btn" @click="clickArpaHeader()"></button> </div> </template>...
  • vue动态控制样式

    2022-05-11 09:35:29
    vue项目开发中,我们经常会通过给元素动态的添加动态样式以实现选中的效果。通过动态的添加style和class达到动态更改样式的效果。 一、动态添加class名
  • 有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 配置项 v-bind:disabled=...
  • Vue动态改变样式的5种方法

    千次阅读 2021-12-23 23:01:15
    1 第一种方法 <div :class= "{'active':isActive}" > 文字</div> 2 第二种方法 <div class="activeOne" :class= "{activeTwo:isActive,'activeThree': hasError}" > 文字<...
  • vue动态样式赋值v-bind:class=''
  • 一、动态添加class的方法 根据数据长度判断是否展示类名 <div :class="item.length > 3?'active':''></div> 定义data,添加class及style <div :class="styleList[item.xxx].hovers" :style=...
  • vue动态更改元素样式

    2021-11-29 08:53:40
    vue项目开发中,好多地方需要动态去改变元素的样式,例如:更改元素class名去更换元素的样式,或更改元素的style去更改元素样式。元素的显示、隐藏、大小、颜色等,也可以配合vuex使用实现类似主题话的更改。 一...
  • 脚本简介基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
  • vue动态改变css样式

    千次阅读 2022-02-11 14:37:17
    实现思路:循环数组,然后添加点击事件,获取到当前点击的index 根据数组的下标去动态的改变样式。 <div class="cross-content"> <div class="cross-state"> <h3>状态筛选</h3> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 150,160
精华内容 60,064
关键字:

vue动态样式