011——VUE中使用object与array控制class 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用object与array控制class</title>
    <script src="vue.js"></script>
</head>
<body>
<style>
    .green{color: green}
    .color{
        color: red;
    }
    .font{font-size: 50px;}
</style>
<div id="lantian">
    <h1 :class="lt">
        科技中国
    </h1>
    <hr>
    <h1 class="green" :class="{color:false}">
        科技中国
    </h1>
    <hr>
    <h2 :class="['color','font']">www.baidu.com</h2>
    <hr>
    <h2 :class="[success,font]">www.baidu.com</h2>
</div>
<script>
    var app = new Vue({
        el: '#lantian',
        data: {
            lt:{color:true,font:true},
            success:'color',
            font:'font'
        }
    });
</script>
</body>
</html>

　　

posted @ 2017-12-19 13:58  生如逆旅，一苇以航  阅读(751)  评论(0)    收藏  举报