xinggevip

Vue2.x_1.6动态绑定css属性
app.jsnew Vue({ el:"#vue-app", data:{ ...
扫描右侧二维码阅读全文
16
2019/05

Vue2.x_1.6动态绑定css属性

app.js

new Vue({
    el:"#vue-app",
    data:{
        changeColor:true,
        changeLength:true,
    },
    methods:{

    },
    computed:{
        shenqi:function () {
            return{
                changeColor:this.changeColor,
                changeLength:this.changeLength,
            }
        }
    }
})

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">
        <button v-on:click="changeColor = !changeColor">change color</button>
        <button v-on:click="changeLength = !changeLength">change Length</button>
        <div v-bind:class="shenqi">
            <span>Hello World</span>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

css

.changeColor{
    background: red;
}
.changeLength{
    height: 500px;
}

效果演示

http://hao.qiangssvip.com/vuestudy/Lesson06

Last modification:May 21st, 2019 at 09:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment