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 ...
随机推荐
- 通过__block的作用深入研究block
block普通引用 默认情况下,在block中访问外部变量是通过复制一个变量来操作的,既可以读,但是写操作不对原变量生效,下面通过代码来举证 NSString *a = @"testa&qu ...
- LRU原理和Redis实现——一个今日头条的面试题(转载)
很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 Redis 中如何实现 LRU. 我的第一反应是操作系统课程里学过,应该是内存不够的场景下,淘汰旧内容的策略.LRU ...
- Nodejs 使用 es module (import/export)
- pom文件中maven-assembly-plugin插件学习
一.使用场景 如果项目是微服务架构,可能用到这个插件的概率比较高,平时普通的项目不需要这样的实现方式. 如果项目内的一部分通用功能,不需要挨个引用,则需要将通用功能部分达成jar包. 二.Maven- ...
- 【iCore4 双核心板_uC/OS-II】例程六:信号量——任务同步
一.实验说明: 信号量是一个多任务内核提出的一个协议机构,上一个实验中我们介绍了信号量访问共享资源 的功能,其实信号量最初是用来控制访问共享资源的,它还可以用来同步一个中断服务函数和一个任 务,或者同 ...
- 【Unity】通用的Debugger日志模块
模块代码整理自 http://gad.qq.com/lore/catalog/10007 Debugger类.提供打印日志的静态方法. using System; using System.IO; n ...
- Spark基本架构及原理
Hadoop 和 Spark 的关系 Spark 运算比 Hadoop 的 MapReduce 框架快的原因是因为 Hadoop 在一次 MapReduce 运算之后,会将数据的运算结果从内存写入到磁 ...
- 大数据架构:搭建CDH5.5.1分布式集群环境
yum install -y ntp gcc make lrzsz wget vim sysstat.x86_64 xinetd screen expect rsync bind-utils ioto ...
- C++ 智能指针七
/* 智能指针weak_ptr */ #include <iostream> #include <string> #include <memory> /* weak ...
- Android Studio Gradle Build Running 加速
加速效果