在.vue组件中怎么实现单击元素后改变该元素的样式啊
在.vue组件中怎么实现单击元素后改变该元素的样式啊
3 回答
<style type="text/css">
.change{
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
.changs{
width: 200px;
height: 200px;
background-color: blue;
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
</style>
<body>
<div id="demo">
<ones :class='[styles]'></ones>
<button v-on:click='doIt'>点击</button>
</div>
<script type="text/javascript">
var one={
template:'<div>呵呵</div>'
};
new Vue({
el:'#demo',
data:{
isTrue:true,
styles:'change'
},
components:{
'ones':one
},
methods:{
doIt:function(){
this.styles='changs'
}
}
})
</script>
</body>
举报
0/150
提交
取消
