我们一生有很多事情需要处理，每天有很多事情处理，我们需要每天记录在一张纸上，一张比较显眼的记事本上，我们为什么不写一个可以“记录”“更改”“已完成”“未完成”“和可以“保存”在电脑上的”一款代码呢？下面是我写的一些vue代码，大家可以参考一下！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用vue.js -->
<script type="text/javascript" src="vue.js"></script>
<!-- css样式 -->
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
float: left;
}
.right {
float: right;
}
#app {
width: 100vw;
height: 100vh;
background-color: #cdcdcd;
}
.top {
width: 100%;
height: 50px;
background-color: #323232;
color: #dddddd;
font-size: 24px;
}
.zhong,
.zong {
width: 600px;
height: 100%;
margin: 0 auto;
}
.buttom>p{
text-align: center;
color: #666666;
margin-top: 10px;
}
.zhong>span {
line-height: 50px;
}
.zhong>input {
width: 360px;
height: 25px;
border: none;
outline: none;
border-radius: 5px;
margin-top: 12px;
padding: 0 10px;
}
.zong>.er{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-left: 470px;
background-color: #e6e6fa;
text-align: center;
line-height: 20px;
}
.zong>h2{
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
}
.zong>.list>.item{
width: 100%;
height: 36px;
background-color: #ffffff;
line-height: 36px;
margin-top: 10px;
padding: 0px 20px;
}
.zong>.list>.item>input:nth-of-type(1){
width: 20px;
height: 24px;
vertical-align: middle;
margin-right: 4px;
}
.zong>.list>.item>input:nth-of-type(2){
width: 420px;
height: 20px;
vertical-align: middle;
outline: none;
}
.zong>.list>.item>.right>img{
vertical-align: middle;
}
.zong>.list>.items{
opacity: .5;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<div class="zhong">
<span class="left">ToDoList</span>
<!-- 输入框 -->
<!-- v-model.trim 数据 -->
<!-- @keyup.enter按下回车键添加数据 -->
<input class="right" type="text" placeholder="添加ToDo" v-model.trim="temp" @keyup.enter="additem()">
</div>
</div>
<div class="buttom">
<div class="zong">
<h2>正在进行</h2>
<!-- 每个的长度 -->
<span class="er">{{len1}}</span>
<div class="list">
<!-- v-for遍历数据 -->
<!-- :key 优化数据 -->
<div class="item" v-for="item in dolist" :key="item.title">
<!-- v-model数据 -->
<input type="checkbox" v-model="item.done">
<!-- @dblclick 双击让临时数据设置为当前标题;修改状态为1代表编辑 -->
<!-- v-show="item.state==0" 当编辑状态为0时候才显示 -->
<span @dblclick="editTemp=item.title;item.state=1"
v-show="item.state==0">{{item.title}}</span>
<!-- v-model="editTemp" 修改后赋值 -->
<!-- v-show="item.state==1"当state等于1时显示 -->
<!-- @keyup.enter="item.title=editTemp;item.state=0"当按下enter键时把修改后的值给title 并且把修改状态隐藏 -->
<!-- @blur="item.title=editTemp;item.state=0" 当失去焦点后时把修改后的值给title 并且把修改状态隐藏-->
<!-- @keyup.esc="item.state=0;editTemp=item.title" 当按下esc键的时候修改状态隐藏并且修改值为原始值 -->
<!-- v-focus="item.state==1" 获取焦点-->
<input type="text" v-model="editTemp" v-show="item.state==1"
@keyup.enter="item.title=editTemp;item.state=0" @blur="item.title=editTemp;item.state=0"
@keyup.esc="item.state=0;editTemp=item.title" v-focus="item.state==1">
<span class="right" @click="deletem(item)"><img src="xiaolian.png"></span>
</div>
</div>
<h2>已经完成</h2>
<span class="er">{{len2}}</span>
<div class="list">
<!-- 遍历数据 -->
<div class="item items" v-for="item in undolist" :key="item.title">
<input type="checkbox" v-model="item.done">
<!-- @dblclick 双击让临时数据设置为当前标题;修改状态为1代表编辑 -->
<!-- v-show="item.state==0" 当编辑状态为0时候才显示 -->
<span @dblclick="editTemp=item.title;item.state=1"
v-show="item.state==0">{{item.title}}</span>
<!-- v-model="editTemp" 修改后赋值 -->
<!-- v-show="item.state==1"当state等于1时显示 -->
<!-- @keyup.enter="item.title=editTemp;item.state=0"当按下enter键时把修改后的值给title 并且把修改状态隐藏 -->
<!-- @blur="item.title=editTemp;item.state=0" 当失去焦点后时把修改后的值给title 并且把修改状态隐藏-->
<!-- @keyup.esc="item.state=0;editTemp=item.title" 当按下esc键的时候修改状态隐藏并且修改值为原始值 -->
<!-- v-focus="item.state==1" 获取焦点-->
<input type="text" v-model="editTemp" v-show="item.state==1"
@keyup.enter="item.title=editTemp;item.state=0" @blur="item.title=editTemp;item.state=0"
@keyup.esc="item.state=0;editTemp=item.title" v-focus="item.state==1">
<span class="right" @click="deletem(item)"><img src="xiaolian.png"></span>
</div>
</div>
</div>
<p>Copyright © 2014 todolist.cn clear</p>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
//存储数据
data: {
// list:[
// // title标题，done是否完成，state，0正常，1编辑
// {title:"学习html",done:true,state:0},
// {title:"学习vue",done:false,state:0},
// ],
list: JSON.parse(localStorage.getItem("list") || "[]"),
temp: "", //标题
editTemp: "", //修改的临时数据
},
//焦点事件
directives: {
"focus": {
update(el, binding) {
// el当前节点；binding.value指令的值
// 如果指令的值为真让el获取焦点
if (binding.value) {
el.focus()
}
}
}
},
//点击事件
methods: {
//创建新的list
additem() {
//创建一项清单
var item = {
title: this.temp,
dong: false,
state: 0
};
//在list的前面添加item
this.list.unshift(item)
//清空temp
this.temp = "";
},
//删除当前行
deletem(item) {
//查找item在list的下标
//遍历的元素当value的title值等于item的title
var ind = this.list.findIndex(value => value.title === item.title);
//删除list第ind个
this.list.splice(ind, 1);
}
},
//计算判断
computed: {
//filter 过滤函数 当返回值是true当前遍历的数据保留，不是就过滤掉
//当done的值为false 希望它保留取反
dolist() {
return this.list.filter(item => !item.done);
},
undolist() {
return this.list.filter(item => item.done);
},
//长度
len1(){
return this.dolist.length;
},
len2(){
return this.undolist.length;
},
},
//监听
watch: {
"list": {
//localStorage 存储方式
//setItem 格式为存储
//JSON.stringify把对象转为json的字符串
handler(nval) {
localStorage.setItem("list", JSON.stringify(this.list));
},
deep: true
}
}
})
</script>
</html>
学海无涯苦作舟啊！
3222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
