zoukankan      html  css  js  c++  java
  • Vue 获取数据、事件对象、todolist

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

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

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

    事件对象

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

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

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

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

    结合双向数据绑定实现todolist

     1 <input type="text" v-model="todo" @keydown='todoadd($event)'/> 
     2 <button @click="todoadda()">增加</button>
     3  <br>
     4  <hr>
     5 <h2>进行中</h2>
     6 <ul>
     7   <li v-for="f,key in list4" v-if="!f.checked">
     8    <input type="checkbox" v-model="f.checked" @change="asd" >  {{f.title}} ----   <button @click="remvdata(key)">删除</button>
     9     </li> 
    10 </ul>
    11 <br>
    12 <h2>已完成</h2>
    13 <ul>
    14   <li class="abde" v-for="f,key in list4" v-if="f.checked">
    15    <input type="checkbox" v-model="f.checked" @change="asd" >  {{f.title}} ----  <button @click="remvdata(key)">删除</button>
    16     </li> 
    17 </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));
        },    
  • 相关阅读:
    ExtJS面向对象
    简单理解Ext.DomQuery操作CSS3选择器
    简单理解Ext.extend
    Pycharm去掉项目所有 # 注释
    windows 杀死进程
    mongo官方企业版安装及数据库授权使用
    python中赋值,深拷贝,浅拷贝区别
    测试驱动开发简单理解
    Flask与WSGI
    Python直接改变实例化对象的列表属性的值 导致在flask中接口多次请求报错
  • 原文地址:https://www.cnblogs.com/1711643472qq/p/9124886.html
Copyright © 2011-2022 走看看