社区首页 >专栏 >使用Vue完成一个checklist

使用Vue完成一个checklist

zx钟

发布于 2019-07-18 13:52:31

99100

代码可运行

文章被收录于专栏：测试游记测试游记

运行总次数：0

代码可运行

创建一个项目

$ 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>