<html>
<head>
<title></title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 动态添加class -->
<h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
<h2 :class="getClass()">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="getClasses()">{{message}}</h2>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data:{
message: 'hello World',
isActive: true,
isLIne: true,
active:'aa',
line:'bb',
},
methods:{
getClass(){
return {
active: this.isActive,
line: this.isLine
}
},
getClasses(){
return [this.active, this.line]
},
}
})
</script>
</body>
</html>
只供自己记录，如有错误，欢迎指出；
网友评论