<template>
<div id="app">
<h1>{{ msg }}</h1>
<br>
<button v-on:click="run1()"> 第一種寫法</button>
<br>
<button @click='run2()'> 第二種寫法</button>
<br>
<button @click='getMsg()'> 獲取mesg</button>
<br>
<button @click='setMsg()'>更改mesg</button>
<br>
<button @click='addData()'>增加數據</button>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<br>
<button @click="byvalue('values=1')">執行方法傳值</button>
<br>
<button data-aid='123' @click="eventFn('$event')">事件對象</button>
</div>
</template>
<script>
/*
雙向數據綁定，用於表單,
*/
export default {
name: 'app',
data () {
return {
msg: 'hello',
list:[]
}
},methods:{
run1(){
alert("第一種方法")
},run2(){
alert("第二種方法")
},getMsg(){
alert(this.msg)
},setMsg(){
this.msg="改變內容"
},addData(){
for(var i=0;i<10;i++){
this.list.push("我是第"+i+" 條數據");
}
},byvalue(env){ #進行傳值
alert(env)
},eventFn(e){
console.log(e);
//e.srcElment.style.backgroud='red';
}
}
}
</script>
<style>
h1, h2 {
font-weight: normal;
}
.box{
width: 100px;
height: 100px;
background-color: #42b983
}
</style>
