Class and Style Bindings 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div 
    class="test" 
    v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
    style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>
    
    <div 
    :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
        hi vue
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        isActive : true,
        isGreen : true,
        color : "#FFFFFF",
        size : '50px',
        isRed : true
    }
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>

 

posted @ 2022-07-17 22:14  yydssc  阅读(11)  评论(0)    收藏  举报