<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()'>增加數(shù)據(jù)</button> <ul> <li v-for="item in list"> {{item}} </li> </ul> <br> <button @click="byvalue('values=1')">執(zhí)行方法傳值</button> <br> <button data-aid='123' @click="eventFn('$event')">事件對象</button> </div> </template><script> /* 雙向數(shù)據(jù)綁定，用于表單, */ export default { name: 'app', data () { return { msg: 'hello', list:[] } },methods:{ run1(){ alert("第一種方法") },run2(){ alert("第二種方法") },getMsg(){ alert(this.msg) },setMsg(){ this.msg="改變內(nèi)容" },addData(){ for(var i=0;i<10;i++){ this.list.push("我是第"+i+" 條數(shù)據(jù)"); } },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>

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/chongyou/p/9505332.html

總結(jié)

以上是生活随笔為你收集整理的vue.js--基础事件定义，获取数据，执行方法传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。