Vue執行方法，方法獲取data值，設置data值，方法傳值

方法寫在methods中

v-on:click="run()"

@click="run()"

 

方法獲取data中的數據通過this.數據獲取

方法設置data中的數據通過this.數據=''設置

例如通過this.list=[1,2,3]，設置list的值，讓頁面出循環list

 

可通過 @click="run('123')"，將值傳到方法中

可通過 @click="run($event)"，將事件對象傳到方法中，然后根據事件對象的e.srcElement設置點擊標簽的屬性，也可以通過e.srcElement.dataset獲取自定義屬性

<template>
  <div id="app">
    {{msg}}
    <button @click="run()">@click事件觸發</button>
    <button v-on:click="runvon()">v-on:click事件觸發</button>
    <button @click="getMsg()">獲取data.msg</button>
    <button v-on:click="setMsg()">設置data.msg</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
    <button @click="setList()">設置List的值</button>
    <button @click="sendData('123')">方法傳值</button>
    <button v-on:click="sendEvent($event)">傳遞事件對象</button>
    <button @click="sendEventSet($event)">傳遞事件對象，並設置背景色</button>
    <button data-a="啦啦啦" @click="sendEventData($event)">傳遞事件對象，並獲取自定義屬性</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '123',
      list:[]
    }
  },
  methods:{
    run(){
      alert("@click事件觸發")
    },
    runvon(){
      alert("v-on:click事件觸發")
    },
    getMsg(){
      alert("我獲取到了msg"+this.msg);
    },
    setMsg(){
      this.msg="我是設置后的值"
    },
    setList(){
      for(var i = 0 ; i < 10 ; i++){
        this.list.push(i)
      }
      
    },
    sendData(a){
      alert("穿過來的值是："+a)
    },
    sendEvent(e){
      console.log(e);
    },
    sendEventSet(e){
      e.srcElement.style.background="red";
    },
    sendEventData(e){
      alert(e.srcElement.dataset.a)
      
    }
  }
}
</script>

<style lang="scss">

</style>