<!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="{active:isActive}"
style="width:200px;height:200px;text-align:center;line-height:200px">
hi vue
</div>
</div>
<script type="text/javascript">
var app=new Vue({
el: '#app',
data :{
message: 'hello Vue!',
isActive:true
//isActive:false
}
});
</script>
<style>
.test{font-size:60px}
.active{background-color: red;}
</style>
</body>
</html>
【四二学堂】class与style绑定(vue系列入门示例之十二)
猜你喜欢
转载自blog.csdn.net/weixin_39593940/article/details/105053593
今日推荐
周排行