【vue学习】vue改变样式

Swingz

发布于 2020-12-18 03:15:54

60500

代码可运行

文章被收录于专栏：SwingzSwingz

运行总次数：0

代码可运行

【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>