使用vue制作简单的todolist
- 点击在GitHub上查看demo
- 在data内创建数据合集
data() {
return {
title: "this is a todo list",//标题
items: [//tuod 事项数据合集
{
label: "coding",//事项
isFinished: false//完成标志
},
{
label: "walking",
isFinished: true
}
]
};
}
- 使用v-for 来渲染 事项
- 根据 isFinished 来标记是否完成
- 通过 v-bind:class=”{finishend:item.isFinished}” 判断是否完成,为true时增加finishend类名效果完成的效果
<ul>
<li v-for="item in items" v-bind:class="{finishend:item.isFinished}">
{{item.label}}
</li>
</ul>
- 使用v-on 绑定事件 实现点击完成/取消
- 在methods内注册方法,才能使用v-on绑定
- 获取当前的isFinished,取反值
methods:{
toggleFinish(item){
console.log(item.isFinished=!item.isFinished);
},
}
- v-model 随表单控件类型不同而不同 在表单控件或者组件上创建双向绑定
- 实现表单内数据的双向绑定
v-on 修饰符
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
设置input触发回调事件 addNew 添加新的列表内
addNew() {
this.items.push({
label: this.newItem,
isFinished: false
});
this.newItem = "";//添加过新的事项之后,清空input内的数据
}
- 利用localstorage来存储todolist数据
- 封装函数,反复调用
const STORAGE_KEY = 'todos-vuejs'; //ES6定义常量,存储用来本地保存的 key 值
export default { //设置函数出口
fetch() { //获取本地存储的数据,并转换json对象
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
},
save(items) { //设置到本地存储,并将对象转换为json字符串
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
}
}
- 在App.vue内引入封装好的函数
import store from "./store"; //调用封装好的函数
- 使用watch 检测items内的数据变化
watch: {
items: {//检测items数据发生变化
handler(items) {//发生变化则会执行handler函数
store.save(items);//调用本地存储,将更新后的数据存储到本地
},
deep: true//深度检测,当键值发生改变时都会执行
}
},
- 点击在GitHub上查看demo