专栏首页测试游记使用Vue完成一个checklist

使用Vue完成一个checklist

创建一个项目

$ vue init webpack-simple vuedemo01

初始化项目

除了Use sass?选择N,其他默认

根据提示安装依赖并运行

$ cd vuedemo01
$ npm install
$ npm run dev

npm install可以使用淘宝的镜像cnpm

运行结果

使用编辑器打开该文件夹

文件夹

需求

差不多是要完成以下界面

目标

编码

去除App.vue多余部分,剩下如下部分即可

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style>
</style>

当前页面

html部分

包含

  • 一个输入框,
  • 两个h2标签的文字
  • n个无序的项
  • 删除按钮
<template>
  <div id="app">
    <input type="text">
    <hr>
    <h2>进行中</h2>
    <ul>
      <li>1</li>
    </ul>
    <hr>
    <h2>已完成</h2>
    <ul>
      <li>2</li>
    </ul>
  </div>
</template>

初版

script数据部分

每次输入到输入框的内容需要一个变量来接收

存放的每个内容,以及与其对应的状态

<script>
export default {
  name: "app",
  data() {
    return {
      todo: "",
      list: [{ todo: "aa", checked: false }]
    };
  }
};
</script>

为了把数据渲染到页面上,需要修改html部分的li中的内容

使用v-for来循环输出list的索引和内容

使用v-if来判断:

  • 复选框没选中的内容会显示在进行中
  • 复选框选中的内容会显示在已完成
<ul>
  <li v-for="(item,key) in list" v-if="!item.checked">
    <input type="checkbox" v-model='item.checked' @change="saveList()">
      {{item.title}} ----- <button>删除</button>
  </li>
</ul>
<ul>
  <li v-for="(item,key) in list" v-if="item.checked" @change="saveList()">
    <input type="checkbox" v-model='item.checked'> {{item.title}} ----- <button @click='deleteDate(key)'>删除</button>
  </li>
</ul>

函数部分

在说函数部分前,还剩下顶部的输入框还没有增加方法的入口

<input type="text" v-model="todo" @keydown='doAdd($event)'>

v-model表明它接收的内容会修改todo

@keydown对应键盘操作

在date部分之后增加methods

image-20190421200514387

import storage from "./model/storage.js";
export default {
  data() {
    return {
      todo: "",
      list: [{ todo: "aa", checked: false }]
    };
  },
  methods: {
    doAdd(e) {
      if (e.keyCode == 13) { //按键13是回车
        this.list.push({//列表中插入对象
          title: this.todo,
          checked: false
        });
      }
      storage.set("list", this.list);
    },
    deleteDate(key) {
      this.list.splice(key, 1);//删除对应索引的内容
      storage.set("list", this.list);
    },
    saveList() {
      storage.set("list", this.list);
    }
  }
};

这里封装了一个storage.js,用于保存数据至本地,这样下次打开页面还是会恢复至上次关闭的时候。

封装

import { loadavg } from "os";

var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }
}
export default storage

全代码

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown='doAdd($event)'>
    <hr>
    <br>
    <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model='item.checked' @change="saveList()">
        {{item.title}} ----- <button @click='deleteDate(key)'>删除</button>
      </li>
    </ul>
    <hr>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked" @change="saveList()">
        <input type="checkbox" v-model='item.checked'> {{item.title}} ----- <button @click='deleteDate(key)'>删除</button>
      </li>
    </ul>


  </div>
</template>

<script>
  import storage from './model/storage.js'
  export default {
    data() {
      return {
        todo: "",
        list: []
      };
    },
    methods: {
      doAdd(e) {
        if (e.keyCode == 13) {
          this.list.push({
            title: this.todo,
            checked: false
          })
        }
        storage.set('list', this.list)
      },
      deleteDate(key) {
        this.list.splice(key, 1)
        storage.set('list', this.list)
      },
      saveList() {
        storage.set('list', this.list)
      }
    },
    mounted() {
      var list = storage.get('list', this.list);
      if (list) {
        this.list = list
      }
    }
  };
</script>

<style lang="scss"></style>

本文分享自微信公众号 - 测试游记(zx94_11)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django的注册功能(五)

    最简单的web开发在一定程度上,应该就是与数据库的各种交互。增删改查并将结果友好的展示到页面上。 在完成了用户表的设计之后,今天就需要完成数据的插入工作了。

    zx钟
  • 爬取友商产品信息

    产品类别url地址为:http://www.dahuatech.com/product.html

    zx钟
  • python基础-装饰器笔记

    函数装饰器用于在源码中“标记”函数,以某种方式增加函数的行为。这是一项强大的功能,但是若想要掌握,必须理解闭包。

    zx钟
  • 7.模块化封装Storage实现缓存数据持久化

    1.在src目录下新建目录model,在model目录下新建js文件取名storage.js

    玩蛇的胖纸
  • 纯代码为网站站点添加雪花飘落效果

    代码放哪里就不用我说了吧,依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey

    沈唁
  • JavaScript “袁华”飞雪特效

    马上就要到了传统节日“春节”?,网站添加了飞雪❄特效,从网上找了源代码,先要感谢张戈博客分享?,现计划将网站在今天上线至过年回来下线,看看可以么,你可以复制到自...

    Debug客栈
  • Win7下修改Hosts文件

    WIN7或者VISTAWIN7或者VISTA系统的需要提升用户对Hosts文件的操作权限,否则无效。 具体方法如下: 方法一:按着Shift键,然后Hosts文...

    跟着阿笨一起玩NET
  • 如何实现指数级扩张:分享经济的五大精神内核

    张孝荣  腾讯研究院总监 孙 怡  腾讯研究院研究员   正所谓“忽如一夜春风来,千树万树梨花开”,分享经济如同一阵浪潮,将千千万万的大众群体卷入其中,...

    腾讯研究院
  • 什么是搜索引擎索引和收录?有什么区别?

    昨天和一个做网站优化的朋友(SEO 新手)交流,说到了搜索引擎的索引、收录,子凡相信这也是很多入门 SEO 新手都比较容易混淆的两个点,所以我们就一起来看看搜索...

    周俊辉
  • hashMap

    https://www.cnblogs.com/skywang12345/category/455711.html

    大学里的混子

扫码关注云+社区

领取腾讯云代金券