VUE初阶段学习基础指令3——事件绑定

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>