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 ...
随机推荐
- java mqtt
代码: package cc.gongchang.mqtt; import java.net.URISyntaxException; import org.fusesource.hawtdispatc ...
- 【转载】VMware虚拟机NAT模式网络配置图文教程
原文:https://blog.csdn.net/dingguanyi/article/details/77829085 一.引言 在Windows上搭建集群实验环境时,为能够让集群结点之间相互通信, ...
- Java基础(三)面向对象(下)
接口 接口中成员修饰符是固定的: 成员常量:public static final 成员函数:public abstract 通过接口间接实现了多重继承 接口的特点 接口是对外暴露的规则 接口是程序的 ...
- James 如何作为服务在后台启动
james 启动后是在前台运行的,就像你跑一个微服务,前台运行显然不合理,关闭ssh后就会断开,所以我们得配置在后台,使用service配置即可 配置 james/bin 下的phoenix.sh,配 ...
- Myeclipse安装、配置、测试
Myeclipse安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装与激活 4.JavaSE开发测试(确保JDK已正确安装) 5.JavaEE开发测试(确保服务器和 ...
- OLT、分光器、ONU直接的关系
- 面试杂谈之我的实习求职之路(7个offer)
现在是5月11号,刚从北京到家,总算也可以歇歇了,最近一段时间真是忙于奔命的感觉,也确实体会到了找工作的艰辛,总而言之,求职之路,如人饮水,冷暖自知. 我想把这段时间找工作的体验和经历分享出来告诉大家 ...
- android sdk manager更新地址
参考:http://www.oschina.net/question/1399261_195245 android sdk 用久了,想更新到最新的SDK包: 大连东软信息学院镜像服务器地址:- htt ...
- socket.timeout: The read operation timed out 更改pip源至国内镜像,显著提升下载速度
出现socket.timeout: The read operation timed out 错误的时候,可能是pip源不稳定,改改试试看! 经常在使用Python的时候需要安装各种模块,而pip ...
- android studio设置imageview显示图片
拖动imageview 选择图片 .png 代码引用: private Imageview pay; pay = (ImageView)findViewById(R.id.imageView2); p ...