Vue动态改变样式实战

港控/mmm° 2021-07-24 21:21 688阅读 0赞

**目录**

一 点睛

二 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">
        
        <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 效果 ##

![20200830102044248.png][]

# 三 通过 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">
        
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        
    
        
        <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 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 四 通过双向绑定改变样式 #

## 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">
        
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <hr>
        
        <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 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 五 多个样式的组合 #

## 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">
        
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <hr>
        
        <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 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 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">
        
        <div class="mydiv" v-bind:class="{red:temp}"></div>
        <hr>
        
        <div class="mydiv" :class="myClassesDiv"></div>
        <hr>
        
        <div class="mydiv" :class="mycolor"></div>
        <hr>
        
        <div class="mydiv" :class="[mycolor,mw]"></div>
        <hr>
        
        <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 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

# 七 用 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">
        
        <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 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4][]

# 八 设置 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">
        
        <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 效果 ##

![20200830141449936.png][]

[20200830102044248.png]: /images/20210724/9f0a68eeff7a4cf8b26fa29839c5bbe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/1ddac768adc64bcbbe57a36438db28e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/7244de40966d4c21bb123bf57ee1e96a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/ab3c2ae6dfe547cb87d500140e44716e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/477bbf08192148cc892e997149484ea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4]: /images/20210724/b75d1f9d3aa34e299711b3303c683cc1.png
[20200830141449936.png]: /images/20210724/f1b364d73e80468e87abb044f9985566.png