<style>
.active{
color: green;
}
.delete{
background:red;
}
.error{
font-size:35px;
}
</style>
<div id="app">
<p :class="activeClass">字符串表达式</p>
<p :class="{delete:isDelete,error:isError}">对象表达式</p>
<p :class="['active','delete','error']">数组表达式</p>
</div>
<script>
/**
v-bind:class="表达式"或者:class="表达式"
class的表达式可以为:
①字符串:
:class="activeClass"
②对象:
:class="{key:value}" key是样式名,value是data中绑定的属性
③数组:
:class="['class1','class2']" 直接写单引号和样式名
*/
var vm=new Vue({
el: '#app',
data: {
activeClass:'active',
isDelete:true,
isError:true
}
})
</script>
[vue] class样式数据绑定
最新推荐文章于 2024-08-21 00:19:03 发布