vue动态操作div的class
看代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js操作元素属性</title>
<script src="vue.js"></script>
</head>
<style>
.red{
color:red;
}
.green{
color: green;
}
</style>
<body> <div id="ask"><!--vue不能控制body和html的标签-->
<h1 v-bind:class="class_1">{{title}}</h1>
<h1 v-bind:class="'green'">{{title}}</h1>
<!--在vue中v-bind这个因为多次使用所以可以使用简短语句-->
<h1 :class="class_1">{{title}}</h1>
<h1 :class="'green'">{{title}}</h1>
</div> <script>
var app = new Vue({ //实例化vue
el:'#ask',//vue控制id为ask的元素,
data:{ class_1:'red'
}
});
</script> </body>
</html>