Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011464124/article/details/88883886

<template>
  <div id="app">
    {{msg}}
    <br>
    <button v-on:click="run1()">执行是事件的第一种方法</button>
    <br>
    <button @click="run2()">执行是事件的第二种方法</button>
    <br>
    <button v-on:click="getMsg()">获取data里面的msg</button>
    <br>
    <button v-on:click="setMsg()">改变data里面的msg</button>
    <br>
    <button v-on:click="requestData()">请求数据</button>
    <br>
    <ul>
      <li v-for="(item,key) in list">
          {{key}}--{{item}}
      </li>
    </ul>
    <br>
    <button v-on:click="deleteData('111')">执行方法传值</button>
    <br>
    <button data-aid='123' v-on:click="eventFunction($event)">事件对象</button>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list:[]
    }
  },
  methods:{

    run1:function(){
      alert("这是一个方法");
    },

    run2(){
      alert("这是二个方法");
    },

    getMsg(){
      alert(this.msg);
    },

    setMsg(){
      alert(this.msg="我是改变后的msg");
    },
    //动态将数据塞入List
    requestData(){
      for (var i = 0; i < 10; i++) {
        this.list.push("我是第"+i+"条数据")

      }
    },

    deleteData(val){
       alert(val);
    },

    //输出dom节点的信息
    eventFunction(e){
      console.log(e);

      e.srcElement.style.background='red';

      //获取自定义属性的值
      console.log(e.srcElement.dataset);
      console.log(e.srcElement.dataset.aid);


    }

  }
}
</script>

运行截图：