vue的事件对象,方法执行
方法都写在methods重,有两种写法:
1、
对于view上面的事件有两种方式定义: v-on:click="""这种方式
或者@click这种写法
----------------
实现一个功能:当点击请求数据按钮时,会将数据赋值

<template>
<div id="app">
{{msg}}
<br>
<button v-on:click="getMsg()">获取 </button>
<button @click="getMsg1()">获取1</button> <button @click="requestData()">点击按钮进行请求赋值 </button> <div>
<ul>
<li v-for="(item,key) in list">
{{key}}------ {{item}}
</li>
</ul>
</div>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'fsafasad',
list:[]
}
},
methods:{
getMsg:function(){
alert(); }, getMsg1(){ alert();
},
requestData(){ for(var i=;i<;i++){
this.list.push("这是第"+ i +"条数据"); //这地方就是点击按钮时,会重新赋值给model,model改变之后,view就会也跟着改变,这是双向绑定
}
}
}
}
</script> <style> </style>
vue的事件对象,方法执行的更多相关文章
- Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...
- vue2.* 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象 05
<template> <div id="app"> <button v-on:click="run1()">执行事件的第一种 ...
- Vue入门---事件与方法详解
一. vue方法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- vue的事件对象
事件对象: v-on:click/mouseover 简写: @click="" @click="show($event)" <input t ...
- Vue 获取数据、事件对象、todolist
vue中在方法里获取data里的msg:this.msg 在微信小程序里this.data.msg 改变data里的msg:this.msg="改变后的msg" 可以通过list. ...
- vue的事件
vue的事件: vue事件简写: vue中事件是 v-on:click=' show()' 但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写 @click='show()' ...
- HTML DOM 事件对象
HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...
- JS HTML DOM 事件对象(onclick、onmouseenter)
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM: ...
- HTML DOM 事件与方法
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 鼠标事件 键盘事件 框架/对象(F ...
随机推荐
- react diff 原理
(1) 把树形结构按照层级分解,只比较同级元素.(2) 列表结构的每个单元添加唯一的 key 属性,方便比较.(3) React 只会匹配相同 class 的 component(这里面的 class ...
- InfluxDB添加新服务
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 这里以添加 syncd 服务为例记录下InfluxDB添加新服务 ...
- Mysql中的定时任务
一.说明 后台周期定时任务可以有多种解决方案,我所知道的大概有以下几种: 后台框架自带定时任务.比如php中的Laravel框架里有提供定时任务操作接口,其他的框架大家可以单独针对了解. 服务器操作系 ...
- 各种OJ网站汇总
acmicpc.info acmicpc.info http://acmicpc.info/archives/224 此网站聚合了各种ICPC相关信息. 国内Online Judge 用户体验极佳的v ...
- 一个会学习(观察->活学->求变)的人,在任何领域都能变得强大无比
开始今天的话题之前,我说个小故事. 很早以前有一部美剧,叫<Hero>. 大概讲的是正反两派都是一群有超能力的人,彼此为了某个巨大的阴谋互相撕逼了十多集.虽然剧情很老套,但是让 ...
- WCF Restful Service Get / Post请求
Rest 它是用于创建分布式超文本媒体的一种架构方式,我们可以通过标准的HTTP(GET,POST,PUT,DELETE)操作来构建基于面向资源的软件架构方式(Resource-Oriented Ar ...
- 框架Thinkphp5 简单的实现行为 钩子 Hook
这篇文章主要介绍了关于框架Thinkphp5 简单的实现行为 钩子 Hook,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 实现在一个方法开始和结束加入两个行为:api_init.ap ...
- Vmware 虚拟机无法启动
问题背景: 自己的电脑坏了,用的事小伙伴的电脑,安装VMware 软件,然后创建虚拟机(放在移动硬盘上).在操作虚拟主机的时候,中间不小心碰到了移动硬盘, 然后移动硬盘就掉线了.这个时候再去启动虚拟主 ...
- zc702-自定义AXI-IP核实验
目的: 自定义一个IP核,通过AXI总线与ARM系统连接 环境: Win7 32bit Vivado2014.4.1 Xilinx sdk2014.4 开发板: Zc702 第一步: 新建一个自定义的 ...
- grokking deep learning
https://www.manning.com/books/grokking-deep-learning?a_aid=grokkingdl&a_bid=32715258