vue_class绑定方法
1.clss绑定对象方法
<style> //css样式
.xxoo{
height: 80px;
width: 80px;
border: 1px solid #000;
}
</style>
<body>
<div id="oo">
<div v-bind:class="{xxoo : isActive}"></div> //clss绑定对象
<button v-on:click="tention"></button> //点击css为false css无效
</div>
<script src="./node_modules/vue/dist/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var pp = new Vue({
el:"#oo",
data:{
isActive : true,
},
methods:{
tention:function(){
this.isActive = !this.isActive
}
}
})
</script>
</body>
2.clss绑定数组方法
<style>
.xxoo{
height: 80px;
width: 80px;
border: 1px solid #000;
}
.bc{
background-color: pink;
}
</style>
<div id="oo">
<div v-bind:class="[oneClas,twoClass]"></div> //绑定数组方法
<button v-on:click="tention"></button>
</div>
<script src="./node_modules/vue/dist/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var pp = new Vue({
el:"#oo",
data:{
oneClas:"xxoo",
twoClass:"bc",
},
})
</script>
3.clss行内style绑定用法
<div id="xxoo">
<div v-bind:style="{width:ooClass,height:caoClass,border:boClass}"></div> <!--class绑定行内样式-->
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var pp = new Vue({
el:"#xxoo",
data:{
ooClass:"80px",
caoClass:"80px",
boClass:"1px solid springgreen ",
},
methods:{
},
})
</script>
