Vue.js实现toDoList列表功能
程序员文章站
2022-05-16 21:30:22
...
toDoList是一个经典的案例，原生js，jquery和vue.js都可以实现此功能，我们先来看看用jquery实现此功能的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" class="sendBtn">
<h2>未完成</h2>
<ul class="list1">
<!-- <li>
<input type="checkbox" name="" id="" value="" />
<span id="">
看电视
</span>
<button type="button">删除</button>
</li> -->
</ul>
<h2>已完成</h2>
<ul class="list2">
<!-- <li>
<input type="checkbox" name="" id="" value="" checked="checked"/>
<span id="">
打游戏
</span>
<button type="button">删除</button>
</li> -->
</ul>
<script src="./lib/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jq 90行js todolist
let sendBtn = $('.sendBtn');
let arr = [
// status true 表示已完成
{
name: '看电视',
status: false
},
{
name: '玩游戏',
status: true
},
];
render()
//发送按钮
sendBtn.change(function(){
let name = sendBtn.val();
let obj = {
name: name,
status: false
};
arr.push(obj);
render()
})
//根据数据 arr 渲染页面 产生页面
function render() {
let list1 = $('.list1')
let list2 = $('.list2')
//拼字符串
let list1Html = '';
let list2Html = '';
for (let i = 0; i < arr.length; i++) {
let obj = arr[i];
if (obj.status == false) {
list1Html +=
`
<li>
<input type="checkbox" name="" id="" value="" data-name="${obj.name}"/>
<span id="">
${obj.name}
</span>
<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
</li>
`
} else {
list2Html +=
`
<li>
<input type="checkbox" name="" id="" value="" checked="checked" data-name="${obj.name}"/>
<span id="">
${obj.name}
</span>
<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
</li>
`
}
}
list1.html(list1Html)
list2.html(list2Html)
//删除按钮
$('.dBtn').click(function(){
console.log(11)
let name = $(this).attr('data-name');
arr = arr.filter(v=>v.name !== name)
render()
})
//修改按钮
$('input[type=checkbox]').change(function(){
////点击的是 未完成的列表
//修改数组对应的元素的 属性值, 然后渲染页面
let name = $(this).attr('data-name')
let obj = arr.find(v=>v.name === name);
console.log(obj)
obj.status = this.checked;
render()
})
}
</script>
</body>
</html>
可以看到，用jquery实现此功能的代码量是比较大的，更不用说原生的js代码了。vue框架十分强大，我们来看看vue实现此效果的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../base/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 输入框 -->
<input type="text" v-model="iptText" @change="inputChange()"><br>
<!-- toDoList列表 -->
<h2>toDoList列表</h2>
<div class="toDoList" id="toDoList">
<ul>
<li v-for="todo,index in todolist" v-if="todo.state===false">
<input type="checkbox" id="checkBox1" @change="ckChange(index,true)"/><span>{{todo.name}}</span>
<button type="button" @click="deleteDate(index)">删除</button>
</li>
</ul>
</div>
<hr >
<!-- finish列表 -->
<h2>Finish列表</h2>
<div class="finish" id="finish">
<ul>
<li v-for="finish,index in todolist" v-if="finish.state===true">
<input type="checkbox" id="checkBox2" checked="checked" @change="ckChange(index,false)"/><span>{{finish.name}}</span>
<button type="button" @click="deleteDate(index)">删除</button>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#box',
data:{
iptText:'', //存输入框的内容
todolist:[
{name:'今天要打代码...',state:false},
{name:'明天要接着打代码哦...',state:false},
{name:'昨天已经过去了',state:true}
]
},
methods:{
//点击checkbox时候的变化方法
ckChange(index,state){
//知道自己获取的是数组里面的哪个对象
// console.log(index)
//找到对应的对象数据
let todo1=this.todolist[index];
//点击了checked复选框之后要改变这个数据的状态
todo1.state=state;
},
//删除的方法,删除对应的下标的元素
deleteDate(index){
this.todolist.splice(index,1)
},
//获取到输入框内容的的方法
inputChange(){
let iptList={name:this.iptText,state:false};
this.todolist.push(iptList);
//将输入框的内容清空
this.iptText=''
}
}
})
</script>
</body>
</html>
vue.js的js代码部分也就20行左右就能实现此效果，完美！！！！