• 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));
        },    
  • 相关阅读:
    LeetCode 204
    华为OJ2051-最小的K个数(Top K问题)
    华为OJ1964-求解立方根(牛顿迭代法)
    华为OJ2288-合唱队(最长递增子序列)
    华为OJ2011-最长公共子串
    【Unix编程】进程间通信(IPC)
    可利用空间表(Free List)
    13.10 Scrapy 通用爬虫
    13.9 Scrapy 对接 Splash
    第十四章 分布式爬虫
  • 原文地址:https://www.cnblogs.com/1711643472qq/p/9124886.html
Copyright © 2020-2023  润新知