Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!--
<img v-bind:src='url' /> <img :src='url' /> --> {{msg}}
<br>
<br>
<br> <button v-on:click="run1()">执行方法的第一种写法</button>
<br><br><br> <button @click="run2()">执行方法的第二种写法</button> <br>
<br>
<br> <button @click="getMsg()">获取data里面的msg</button> <br>
<br>
<br> <button @click="setMsg()">改变data里面的msg</button> <br>
<br>
<br> <button @click="requestData()">请求数据</button> <hr> <ul> <li v-for="(item,key) in list">
{{key}}--- {{item}}
</li>
</ul> <br>
<br>
<br>
<button @click="deleteData('111')">执行方法传值111</button> <br>
<br>
<button @click="deleteData('222')">执行方法传值2222</button>
<br>
<br>
<br>
<button data-aid='123' @click="eventFn($event)">事件对象</button> </div>
</template> <script> export default {
data () {
return {
msg: '你好vue',
list:[]
}
},
methods:{ run1:function(){ alert('这是一个方法'); }, run2(){
alert('这是另一个方法');
},
getMsg(){
alert(this.msg);
},
setMsg(){ this.msg="我是改变后的数据"
},
requestData(){ for(var i=0;i<10;i++){ this.list.push('我是第'+i+'条数据');
}
}
,
deleteData(val){ alert(val);
},
eventFn(e){
console.log(e); // e.srcElement dom节点 e.srcElement.style.background='red'; console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/
} } }
</script> <style lang="scss"> </style>
Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象的更多相关文章
- ajax验证用户名 当用户名框的数据改变时 执行ajax方法
ajax验证用户名 当用户名框的数据改变时 执行ajax方法 <html xmlns="http://www.w3.org/1999/xhtml" ><head ...
- vue2.* 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象 05
<template> <div id="app"> <button v-on:click="run1()">执行事件的第一种 ...
- Vue动态添加v-model绑定及获取其返回数据
从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { retu ...
- java方法句柄-----2.方法句柄的获取、变换、特殊方法句柄
目录 1.获取方法句柄 1.1查找构造方法.一般方法和静态方法的方法句柄 1.2 查找类中的特殊方法(类中的私有方法) 1.3 查找类中静态域和一般域 1.4 通过反射API得到的Constructo ...
- vue 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...
- 本地搭了http服务(localhost),怎么在vue环境下,通过axios获取到接口数据
1. 找到 vue项目\config\index.js 文件 2. proxyTable: { '/api': { target: 'http://127.0.0.1:9420', changeOri ...
- vue 改变数据DOM不更新,获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
- 关于Vue中,在方法中使用(操作)子组件获取到的数据
已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created.mounted生命周期中使用的,只能在beforeUpdated或者updated获取到: 但是如果我们要使用这个数 ...
- .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)——转载
原文链接:https://blog.walterlv.com/post/dotnet-high-performance-reflection-suggestions.html ***** 大家都说反射 ...
随机推荐
- 后台将数据传回前台的三种绑定的方式(Model,Map.ModelAndView)
//方式1:通过model 将数据绑定 @RequestMapping(value = "findByIdModel", method = RequestMethod.GET) p ...
- oracle数据库锁表
在团队开发一个项目的时候,避免不了两个或两个以上的人同时操作某一数据库中的同一张表,这时候,如果一个用户没有提交事务,或者忘记提交事务,那么其他用户就不能对这张表进行操作了,这是很烦人的事情,下面是查 ...
- celery retry发送的队列
celery retry时,将发送到原有的队列,并在任务中加入执行的时间,以及当前重试的次数. worker立刻读取该任务,同时记录一条[任务]到 unacked中,表示该任务在worker中还未执行 ...
- Oracle中日期作为条件的查询
1.范围日期的查询: select * from goods where g_time betweento_date('2018/12/26 10:01:59','yyyy-MM-dd hh:mi:s ...
- simple模式下rabbitmq的代码
simple模式代码 package RabbitMQ import ( "fmt" "github.com/streadway/amqp" "log ...
- IDEA激活码(直到2020年6月)
K6IXATEF43-eyJsaWNlbnNlSWQiOiJLNklYQVRFRjQzIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55CG5ZWGOiBodHRwOi8va ...
- C语言十六进制转换成十进制:要从右到左用二进制的每个数去乘以16的相应次方
#include <stdio.h> /* 十六进制转换成十进制:要从右到左用二进制的每个数去乘以16的相应次方: 在16进制中:a(A)=10 b(B)=11 c(C)=12 d(D)= ...
- linux 查看带宽瓶颈
1.首先要确定网卡带宽是多少(单位是Mbit/s) ethtool eth1 | grep Speed 2.确定当前带宽使用情况 使用 nload 工具,如果没有可以yum install nload ...
- C# 获取枚举值/获取名字和值
枚举 int 转 枚举名称 public void Test() { //调用 string name1= ConvertEnumToString<ActionLogType>(1); s ...
- radio得值
$('input[name="ylqxjylcldnbModel.jylb"]:checked').val(); <input type="radio" ...