VUE初阶段学习基础指令3——事件绑定
<div id="app">
<div v-bind:id="id1" v-bind:style="{width:width,height:height,background:color}" v-html="age"></div>
<div></div>
<div></div>
<button @click="changestyle">按钮</button>
<button @mouseover="changestyle1" @mouseout="changestyle2">按钮</button>
<button>按钮</button>
</div>
<script>
var app = new Vue({
el:"#app",
data(){
return{
id1:"box1",
age:17,
width:"50px",
height:"50px",
color:"red"
}
},
methods:{
changestyle:function(){
this.width="80px"
this.height="80px"
this.color="pink"
},
changestyle1:function(){
this.width="90px"
this.height="90px"
this.color="yellow"
},
changestyle2:function(){
this.width="50px"
this.height="50px"
this.color="red"
}
}
})
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/24948c0b2e4b72725086172f9eefc667.png#pic_center)