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>

 

转载于:https://www.cnblogs.com/chenyishi/p/9150182.html