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

<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>

运行截图:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值