vue中在方法里获取data里的msg:this.msg   在微信小程序里this.data.msg

改变data里的msg:this.msg="改变后的msg"

可以通过list.push('数据')往list里面添加数据

事件对象

在执行方法的时候传入$event

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

可以获取坐标自定义属性获取dom等等

结合双向数据绑定实现todolist

 <input type="text" v-model="todo" @keydown='todoadd($event)'/>
<button @click="todoadda()">增加</button>
<br>
<hr>
<h2>进行中</h2>
<ul>
<li v-for="f,key in list4" v-if="!f.checked">
<input type="checkbox" v-model="f.checked" @change="asd" > {{f.title}} ---- <button @click="remvdata(key)">删除</button>
</li>
</ul>
<br>
<h2>已完成</h2>
<ul>
<li class="abde" v-for="f,key in list4" v-if="f.checked">
<input type="checkbox" v-model="f.checked" @change="asd" > {{f.title}} ---- <button @click="remvdata(key)">删除</button>
</li>
</ul>

todolist html

 data() {
/*业务逻辑里面定义的数据*/
return {
list4: [],
},mounted() {
//生命周期函数!!
var list4 = JSON.parse(localStorage.getItem("list4"));
if (list4) {
this.list4 = list4;
}
},methods: {
//里面写方法
asd() {
localStorage.setItem("list4", JSON.stringify(this.list4));
}, todoadda() {
this.list4.push({
title: this.todo,
checked: false
});
this.todo = "";
localStorage.setItem("list4", JSON.stringify(this.list4));
},
todoadd(c) {
if (c.keyCode == 13) {
this.list4.push({
title: this.todo,
checked: false
});
this.todo = "";
localStorage.setItem("list4", JSON.stringify(this.list4));
}
},
remvdata(key) {
this.list4.splice(key, 1);
localStorage.setItem("list4", JSON.stringify(this.list4));
},

Vue 获取数据、事件对象、todolist的更多相关文章

  1. 五、Angular定义字段、绑定字段、获取数据、对象获取数据、*ngFor循环获取数据,自定义方法、*ngIf条件判断、双向数据绑定

    1.定义属性 2.绑定属性.绑定html中 3.循环获取数据 编写的时候没有注意,第二个循环 i 需要改成 {{i}} ,这样才会显示 出效果 4.自定义方法 变量名截图省略 5.*ngIf条件判断 ...

  2. Vue获取数据渲染完成事件

    主要代码是这两坨 this.nextTick(function(){ alert('数据已经更新') }); this.$nextTick(function(){ alert('v-for渲染已经完成 ...

  3. vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  4. 获取当前事件对象及this的用法

    js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...

  5. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  6. js中获取事件对象的方法小结

    原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...

  7. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  8. 移动端事件对象touches的误区

    不想长篇大论,也是自己遗留下的一个错误的理解 在移动端触屏事件有四个 // 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 tou ...

  9. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

随机推荐

  1. Nginx 多进程连接请求/事件分发流程分析

    Nginx使用多进程的方法进行任务处理,每个worker进程只有一个线程,单线程循环处理全部监听的事件.本文重点分析一下多进程间的负载均衡问题以及Nginx多进程事件处理流程,方便大家自己写程序的时候 ...

  2. node 常用指令 node 扩展链接

    node -v       node 版本 npm -v     npm版本号,npm是在安装nodejs时一同安装的nodejs包管理器  (注册.安装模块,和小乌龟有点像) npm list  当 ...

  3. Tensorflow一些常用基本概念与函数(一)

    1.tensorflow的基本运作 为了快速的熟悉TensorFlow编程,下面从一段简单的代码开始: import tensorflow as tf #定义‘符号’变量,也称为占位符 a = tf. ...

  4. 297. Serialize and Deserialize Binary Tree *HARD*

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  5. python批量给云主机配置安全组

    python批量给云主机配置安全组 用公有云的思路去思考去实现一个安全稳定.可伸缩和经济的业务构架,云运维是有别与传统运维的,比如说了解公有云的都知道安全组的概念,安全组跟防火墙功能很相似,那我的机器 ...

  6. https wireshark抓包——要解密出原始数据光有ssl 证书还不行,还要有浏览器内的pre-master-secret(内存里)

    基于wireshark抓包的分析 首先使用wireshark并且打开浏览器,打开百度(百度使用的是HTTPS加密),随意输入关键词浏览. 我这里将抓到的包进行过滤.过滤规则如下 ip.addr == ...

  7. POJ 3087 Shuffle'm Up 线性同余,暴力 难度:2

    http://poj.org/problem?id=3087 设:s1={A1,A2,A3,...Ac} s2={Ac+1,Ac+2,Ac+3,....A2c} 则 合在一起成为 Ac+1,A1,Ac ...

  8. (UDP)socket编程

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  9. 在jenkins和sonar中集成jacoco(一)--使用jacoco收集单元测试的覆盖率

    之前系统的持续集成覆盖率工具使用的是cobetura,使用的过程中虽然没什么问题,但感觉配置比较麻烦,现在准备改用jacoco这个覆盖率工具来代替它.接下来我介绍一下jenkins配置jacoco,并 ...

  10. 关于React setState的实现原理(三)

    前面提到事务即将结束时,会去调用FLUSH_BATCHED_UPDATES的flushBatchedUpdates方法执行批量更新,该方法会去遍历dirtyComponents,对每一项执行perfo ...