淘先锋技术网

首页 1 2 3 4 5 6 7

Vue-动态绑定CSS样式

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--vue-app是根容器-->
    <div id="vue-app">
        <h1>动态 CSS Class</h1>


        <h2>实例 1</h2>
        <!--<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">-->
            <!--<span>Henry</span>-->
        <!--</div>-->
        <h2>实例 2</h2>
        <button v-on:click="changeColor=!changeColor">change color</button>
        <button v-on:click="changeLength=!changeLength">change length</button>
        <div v-bind:class="compClasses">
            <span>Henry</span>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

new Vue({
    el:"#vue-app",
    data:{
        changeColor:false,
        changeLength:false
    },
    methods:{
    },
    computed:{
        compClasses:function () {
            return {
                changeColor:this.changeColor,
                changeLength: this.changeLength
            }
        }
    }
});

style.css

span{
    background: red;
    display: inline-block;
    padding:10px;
    color:#fff;
    margin: 10px 0;
}
.changeColor span{
    background:green;
}
.changeLength span:after{
    content:"length";
    margin-left: 10px;
}