Vue动态改变样式实战 – 小飞侠

Vue动态改变样式实战

Post author:xfxia
Post published:2023年9月30日
Post category:vue

目录

二 vue动态改变样式

三通过 computed 改变样式

四通过双向绑定改变样式

五多个样式的组合

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

七用 computed 设置样式

八设置 style 属性的多个样式的组合（数组）

一点睛

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 效果

版权声明：本文为chengqiuming原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/chengqiuming/article/details/108303448