使用Vue完成一个checklist
创建一个项目
$ vue init webpack-simple vuedemo01
初始化项目
除了Use sass?选择N，其他默认
根据提示安装依赖并运行
$ cd vuedemo01
$ npm install
$ npm run devnpm 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>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-04-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录