【vue学习】vue改变样式

最新推荐文章于 2023-11-09 15:10:34 发布

Swingzzz

最新推荐文章于 2023-11-09 15:10:34 发布

阅读量203

点赞数

分类专栏： Vue学习文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_41908867/article/details/108871664

版权

Vue学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文主要介绍了在Vue中如何动态改变元素样式，包括class的动态绑定，使用computed属性返回包含多个键值对的对象，双向绑定的应用以及如何进行多个样式操作。通过这些方法，可以实现更灵活的界面交互和动态视觉效果。

摘要由CSDN通过智能技术生成

【vue学习】Vue改变样式

css样式

    <style>
        .mydiv{
            width:400px;
            height:50px;
            background-color: gray;
        }

        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .green{
            background-color: green;
        }
        .mywidth{
            width: 450px;
        }
    </style>

1.class的动态绑定

<body>
    <div id="app">
        <div v-bind:class="{red:temp}"class="mydiv"></div>
        <button type="button" @click="temp=!temp">点我</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script
    <script>
        var v1 = new Vue({
            el:"#app",
            data:{
                temp:false
            }
        })
    </script>
</body>

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

<body>
    <div id="app">
        <div :class="myClassStyle" class="mydiv"></div>
        <button type="button" @click="temp=!temp">点我</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var v1 = new Vue({
            el:"#app",
            data:{
                temp:false
            },
            computed:{
                myClassStyle:function(){
                    return{
                        red:this.temp,
                        mywidth:this.temp
                    }
                }
            }
        })
    </script>
</body>

3.双向绑定的体现

<body>
    <div id="app">
        <div :class="mycolor"   class="mydiv"></div>
        <button type="button" @click="temp=!temp">点我</button>
        <!-- 绑定数据mycolor -->
        <input type="text" v-model="mycolor" />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var v1 = new Vue({
            el:"#app",
            data:{
                temp:false,
                mycolor:'green'
            },
            computed:{
                myClassStyle:function(){
                    return{
                        red:this.temp,
                        mywidth:this.temp
                    }
                }
            }
        })
    </script>
</body>

4.多个样式操作

<body>
    <div id="app">
        <div :class="[mycolor,mv]"   class="mydiv"></div>
        <button type="button" @click="temp=!temp">点我</button>
        <input type="text" v-model="mycolor" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var v1 = new Vue({
            el:"#app",
            data:{
                temp:false,
                mycolor:'green',
                mv:"mywidth"
            },
            computed:{
                myClassStyle:function(){
                    return{
                        red:this.temp,
                        mywidth:this.temp
                    }
                }
            }
        })
    </script>
</body>

Swingzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue学习】vue改变样式

【vue学习】Vue改变样式css样式 <style> .mydiv{ width:400px; height:50px; background-color: gray; } .red{ background-color: red; } .yellow{ background-color
复制链接

扫一扫

专栏目录