精华内容
下载资源
问答
  • 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 代码

    2 效果

    三 通过 computed 改变样式

    1 代码

    2 效果

    四 通过双向绑定改变样式

    1 代码

    2 效果

    五 多个样式的组合

    1 代码

    2 效果

    六 在内嵌的css样式中指定 style 属性的值

    1 代码

    2 效果

    七 用 computed 设置样式

    1 代码

    2 效果

    八 设置 style 属性的多个样式的组合(数组)

    1 代码

    2 效果


    一 点睛

    1 通过给html元素的 class 属性绑定 vue 中的属性值,得到样式的动态绑定。

    2 通过 computed 返回一个对象,对象里放着多个键值对。

    3 可以通过双向绑定改变样式。

    4 多个样式的组合通过数组实现。

    5 在内嵌的css样式中指定 style 属性的值

    6 使用 computed 设置样式

    7 设置 style 属性的多个样式的组合(数组)

    二 vue动态改变样式

    1 代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>vue动态改变样式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv{
                width: 200px;
                height: 220px;
                background-color: black;
            }
            .red{
                background-color: red;
            }
            .yellow{
                background-color: yellow;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
    <div id="app">
        <!-- 通过给html元素的 class 属性绑定 vue 中的属性值,得到样式的动态绑定,在这里如果 temp=true,class就生效 -->
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <button type="button" @click="temp=!temp">点我</button>
    </div>
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
            },
        })
    </script>
    </body>

    2 效果

     

    三 通过 computed 改变样式

    1 代码

    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>vue的计算属性动态改变样式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv {
                width: 200px;
                height: 200px;
                background-color: black;
            }
    
    
            .red {
                background-color: red;
            }
    
    
            .yellow {
                background-color: yellow;
            }
    
    
            .blue {
                background-color: blue;
            }
    
    
            .mywidth {
                width: 450px;
            }
        </style>
    </head>
    
    
    <body>
    <div id="app">
        <!-- 通过给html元素的 class 属性绑定 vue 中的属性值,得到样式的动态绑定 -->
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        
    
        <!-- 通过 computed 返回一个对象,对象里放着多个键值对 -->
        <div class="mydiv" :class="myClassesDiv"></div>
        
    
        <div class="mydiv"></div>
        <button type="button" @click="temp=!temp">点我</button>
    </div>
    
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
            },
            computed: {
                myClassesDiv: function () {
                    return {
                        red: this.temp,
                        mywidth: this.temp
                    }
                }
            }
        })
    </script>
    </body>

    2 效果

    四 通过双向绑定改变样式

    1 代码

    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>通过双向绑定改变样式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv {
                width: 200px;
                height: 200px;
                background-color: black;
            }
    
    
            .red {
                background-color: red;
            }
    
    
            .yellow {
                background-color: yellow;
            }
    
    
            .blue {
                background-color: blue;
            }
    
    
            .mywidth {
                width: 450px;
            }
        </style>
    </head>
    
    
    <body>
    <div id="app">
        <!-- 通过给html元素的 class 属性绑定 vue 中的属性值,得到样式的动态绑定 -->
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <hr>
        <!-- 通过 computed 返回一个对象,对象里放着多个键值对 -->
        <div class="mydiv" :class="myClassesDiv"></div>
        <hr>
        <!-- 通过双向绑定改变样式 -->
        <div class="mydiv" :class="mycolor"></div>
        <button type="button" @click="temp=!temp">点我</button>
        <input type="text" v-model="mycolor">
    </div>
    
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
                mycolor: 'blue'
            },
            computed: {
                myClassesDiv: function () {
                    return {
                        red: this.temp,
                        mywidth: this.temp
                    }
                }
            }
        })
    </script>
    </body>

    2 效果

    五 多个样式的组合

    1 代码

    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>多个样式的组合</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv {
                width: 200px;
                height: 100px;
                background-color: black;
            }
    
    
            .red {
                background-color: red;
            }
    
    
            .yellow {
                background-color: yellow;
            }
    
    
            .blue {
                background-color: blue;
            }
    
    
            .mywidth {
                width: 450px;
            }
        </style>
    </head>
    
    
    <body>
    <div id="app">
        <!-- 通过给html元素的 class 属性绑定 vue 中的属性值,得到样式的动态绑定 -->
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <hr>
        <!-- 通过 computed 返回一个对象,对象里放着多个键值对 -->
        <div class="mydiv" :class="myClassesDiv"></div>
        <hr>
        <!-- 通过双向绑定改变样式 -->
        <div class="mydiv" :class="mycolor"></div>
        <hr>
        <!-- 通过数组多个样式的组合 -->
        <div class="mydiv" :class="[mycolor,mw]"></div>
        <hr>
        <button type="button" @click="temp=!temp">点我</button>
        <input type="text" v-model="mycolor">
    </div>
    
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
                mycolor: 'blue',
                mw:'mywidth'
            },
            computed: {
                myClassesDiv: function () {
                    return {
                        red: this.temp,
                        mywidth: this.temp
                    }
                }
            }
        })
    </script>
    </body>

    2 效果

    六 在内嵌的css样式中指定 style 属性的值

    1 代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>在内嵌的css样式中指定 style 属性的值</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv {
                width: 200px;
                height: 100px;
                background-color: black;
            }
    
            .red {
                background-color: red;
            }
    
            .yellow {
                background-color: yellow;
            }
    
            .blue {
                background-color: blue;
            }
    
            .mywidth {
                width: 450px;
            }
        </style>
    </head>
    
    <body>
    <div id="app">
        <!-- 通过给html元素的 class 属性绑定 vue 中的属性值,得到样式的动态绑定 -->
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <hr>
        <!-- 通过 computed 返回一个对象,对象里放着多个键值对 -->
        <div class="mydiv" :class="myClassesDiv"></div>
        <hr>
        <!-- 通过双向绑定改变样式 -->
        <div class="mydiv" :class="mycolor"></div>
        <hr>
        <!-- 通过数组多个样式的组合 -->
        <div class="mydiv" :class="[mycolor,mw]"></div>
        <hr>
        <!-- 在内嵌的css样式中指定 style 属性的值
        注意:style 引用了 vue 中的内容,因此是一个键值对,所以需要大括号,对象的的键是不能出现“background—color”,因此改成 backgroundColor
        -->
        <div class="mydiv" :style="{backgroundColor:mycolor2}"></div>
        <hr>
        <button type="button" @click="temp=!temp">点我</button>
        <input type="text" v-model="mycolor">
    </div>
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
                mycolor: 'blue',
                mw:'mywidth',
                mycolor2:'green'
            },
            computed: {
                myClassesDiv: function () {
                    return {
                        red: this.temp,
                        mywidth: this.temp
                    }
                }
            }
        })
    </script>
    </body>

    2 效果

    七 用 computed 设置样式

    1 代码

    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>在内嵌的css样式中指定 style 属性的值</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv {
                width: 200px;
                height: 100px;
                background-color: black;
            }
    
    
            .red {
                background-color: red;
            }
    
    
            .yellow {
                background-color: yellow;
            }
    
    
            .blue {
                background-color: blue;
            }
    
    
            .mywidth {
                width: 450px;
            }
        </style>
    </head>
    
    
    <body>
    <div id="app">
        <!-- 使用 computed 设置样式 -->
        <div class="mydiv" :style="mystyle"></div>
        <hr>
        <button type="button" @click="temp=!temp">点我</button>
        <input type="text" v-model="mycolor">
    </div>
    
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
                mycolor: 'blue',
                mw:'mywidth',
                mycolor2:'green'
            },
            computed: {
                myClassesDiv: function () {
                    return {
                        red: this.temp,
                        mywidth: this.temp
                    }
                },
                mystyle:function () {
                    return {
                        background:this.mycolor
                    }
                }
            }
        })
    </script>
    </body>

    2 效果

    八 设置 style 属性的多个样式的组合(数组)

    1 代码

    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="utf-8">
        <title>设置 style 属性的多个样式的组合(数组)</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .mydiv {
                width: 200px;
                height: 100px;
                background-color: black;
            }
    
    
            .red {
                background-color: red;
            }
    
    
            .yellow {
                background-color: yellow;
            }
    
    
            .blue {
                background-color: blue;
            }
    
    
            .mywidth {
                width: 450px;
            }
        </style>
    </head>
    
    
    <body>
    <div id="app">
        <!-- 设置 style 属性的多个样式的组合(数组) -->
        <div class="mydiv" :style="[mystyle,{width:mywidth2+'px'}]"></div>
        <button type="button" @click="temp=!temp">点我</button>
        颜色:<input type="text" v-model="mycolor">
        宽度:<input type="text" v-model="mywidth2">
    </div>
    
    
    <script type="text/javascript">
        // Vue的实例
        new Vue({
            el: "#app",    // 接管哪一个元素,和该元素绑定
            data: {        // 数据
                temp: false,
                mycolor: 'blue',
                mw: 'mywidth',
                mycolor2: 'green',
                mywidth2: 300
            },
            computed: {
                myClassesDiv: function () {
                    return {
                        red: this.temp,
                        mywidth: this.temp
                    }
                },
                mystyle: function () {
                    return {
                        background: this.mycolor
                    }
                }
            }
        })
    </script>
    </body>

    2 效果

     

    展开全文
  • Vue动态更改/设置元素样式

    千次阅读 2020-06-04 18:44:38
    写在methods里, :style动态绑定方法返回的属性 <div> <span class="res" v-for="(data, index) in data" :key="index"> <!-- 当传不同的值时会渲染出不同颜色的方块 --> <span :style=...

    1.

    写在methods里, :style动态绑定方法返回的属性

    <div>
    	<span class="res" v-for="(data, index) in data" :key="index">
    	<!-- 当传不同的值时会渲染出不同颜色的方块 -->
        <span :style="giveColor(data)">
             {{index + 1}}
         </span>
     </span>
    </div>
    
    // 定义一个数组, 放所有可能的颜色, 用swatch来判断返回那种颜色, return后不要用background-color, 要转换成backgroundColor驼峰,属性对应的的值要用引号包裹
     giveColor(num) {
            let colorArray = ["green", "red", "white", "yellow"];
            let color = "";
            switch (num) {
                case 1:
                  color = colorArray[num - 1];
                  break;
                case 2:
                  color = colorArray[num - 1];
                  break;
                case 3:
                  color = colorArray[num - 1];
                  break;
                case 4:
                  color = colorArray[num - 1];
                  break;
            }
            return {
                display: "inline-block",
                width: "100%",
                height: "100%",
                backgroundColor: color,
            };
          }
    

    2.

    放在data()里

    <div>
    	<span class="res" v-for="(data, index) in data" :key="index">
    	<!-- 直接绑定 -->
        <span :style="styleData">
             {{index + 1}}
         </span>
     </span>
    </div>
    
    export default {
        data() {
          return {
            styleData: {
              display: "inline-block",
              width: "100%",
              height: "100%",
              backgroundColor: "red",
            }
       	  }
        }
    }
    

    其他情况应变就好, 不管怎样记得属性要驼峰, 值用引号包裹

    展开全文
  • 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;...

    控制多个样式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
    .text-danger {
    	width: 100px;
    	height: 100px;
    	background: red;
    }
    .active {
    	width: 100px;
    	height: 100px;
    	color: green;
    }
    </style>
    </head>
    <body>
    <div id="app">
    	<div v-bind:class="[isTest ? errorClass : '',isActive ? activeClass : '']">ceshi</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
    	isTest:true,  
    	activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
    </script>
    </body>
    </html>
    

    控制单个样式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
    .active {
    	width: 100px;
    	height: 100px;
    	background: green;
    }
    .text-danger {
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="app">
      <div class="static"
         v-bind:class="isActive?'active':''">
      </div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
    	hasError: true
      }
    })
    </script>
    </body>
    </html>
    
    展开全文
  • 今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE动态设置class,定义样式

    千次阅读 2020-01-28 13:44:25
    vue动态定义class 定义样式 :class="{'className': this.number === 1}

    vue动态定义class 定义样式

    :class="{'className': this.number === 1}"
    
    展开全文
  • 二、vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head>...
  • 主要介绍了vue 动态修改a标签的样式的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 如何通过动态更改vue中的样式

    千次阅读 2019-07-17 10:57:38
    通过使用v-bind绑定class和style动态的改变DOM元素的样式。v-bind的基本用法以及它的语法糖,它主要用法是动态更新HTML元素上的属性。 绑定class的几种方式 1.对象语法 给v-bind:class设置一个对象,可以动态地切换...
  • 主要介绍了vue中如何实现样式之间的切换及vue动态样式的实现方法,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
  • 动态添加的类名是基于数据的,当对应的数据为 true 时会显示,否则没有 对象语法: 绑定单个class: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • 主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 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 动态样式

    万次阅读 2019-04-26 21:45:00
    动态设置class (machineItem,machineIndex) in machineList" @click="clickMachineEvent"> <p>{{machineItem.name}} (machineItem.status)"> 方法判断 (machineItem,machineIndex) in processItem....
  • vue动态修改组件样式

    千次阅读 2020-07-07 18:18:24
    一般我们vue动态修改一个组件的样式会用 :class :style等方法。 今天我在修改一个组件样式的时候发现覆盖不了原有样式 于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css...
  • vue动态设置css的样式

    千次阅读 2020-10-10 16:11:21
    前言: 在实际开发时,经常会遇到需要动态更换css样式的情况,比如今天自己在练习时遇到的一个简单的小问题,就是切换tab后动态的修改选中后的字体颜色,没有做成控件,就用a标签做的。 ...
  • vue动态更改样式,实现div点击效果

    千次阅读 2020-11-19 10:17:29
    效果展示: 代码如下: {{item.key}} 思路: :class="{active:index==isActive}"可以实现样式动态绑定,即div是否有active属性,取决于index==isActive表达式的真假,若为true,则active属性被激活,会按照。...
  • vue 动态的修改元素样式

    千次阅读 2019-08-17 12:09:39
    在操作时,如果需要写很多的样式,可以使用style.cssText='xxxx',如果是单独设置某一个属性,可以直接使用style.xxx来实现,同时,修改方法需要在钩子函数mouted完全挂载的时候。 学习博客: ...
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue样式问题,一直以来这一块自己也没有好好...
  • 1.动态设置div的class 可以通过传给:class一个对象,以动态地切换class <div :class="{ active: isActive,'text-danger': hasError }"></div> 上面表示active这个class是否存在。取决于数据...
  • Vue.js动态改变样式

    千次阅读 2021-07-27 14:11:45
    动态改变样式 我们经常有这样的需求,就是用js控制css。但是我们知道js只能控制DOM层和BOM层,没有办法控制写入CSS文件。可是我们有时候偏偏需要改变样式怎么办呢?我们有两种方法: 动态改变style属性值 动态切换...
  • Vue如何设置动态宽度高度或者动态样式1. 添加样式绑定2. 添加属性计算 在开发过程中,很多时候都会用到动态的计算的样式,比如宽度,高度。特别是开发后台管理系统。 那么首先你务必看Vue的官方文档。涉及到的基础...
  • vue中style标签使用属性scoped的注意事项 ...style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用。可以先去掉scoped 转载于:https://www.cnblogs.com/zuojiayi/p/9364347.html...
  • Vue-动态渲染样式

    千次阅读 2018-11-23 18:41:17
    Vue项目中页面的element穿梭框组件中,要对每一条数据是否标记做出样式的区分,写小程序时一直用的三元表达式觉得判断很简洁,便看文档找到了Vue动态设置样式的方法: 效果图: &lt;div class="allList...
  • 主要介绍了vue 实现根据data中的属性值来设置不同的样式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 动态的修改样式

    2020-06-15 17:01:30
    需要为元素配置ref属性 el按钮 2.... 在操作时,如果需要写很多的样式,可以使用style.cssText='xxxx',如果是单独设置某一个属性,可以直接使用style.xxx来实现,同时,修改方法需要在钩子函数mouted完全挂载的时候。
  • 动态设置样式 calc计算

    千次阅读 2018-10-13 14:39:00
    :style = " `height:${size - 110}px;display:${img === ''? none : inline};`" width: calc(100% - 90px;) 转载于:https://www.cnblogs.com/cs122/p/9782868.html
  • vue动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    问题描述: 一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变...toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入 <div v-show="toast" class...
  • vue动态绑定样式:style

    千次阅读 2019-06-28 21:19:15
    1.直接在元素上通过:style的形式,书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 在data上定义样式data:{ styleObj1:...
  • vue动态绑定样式【三元表达式】

    万次阅读 2018-09-20 11:37:27
    三元表达式 :style="{disabled:!amendPhoneIsShow?'':'disabled'}" 三元表达式和class共存:class="[{'active':navIndex==4},'nav4']" 

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 122,442
精华内容 48,976
关键字:

vue动态设置样式

vue 订阅