Vue小案例——奇妙清单（vue指令综合应用）
程序员文章站
2022-07-04 19:23:29
...
需求：
运用Vue常用指令编写程序实现美妙清单功能：
列表展示、项目添加、项目删除、项目筛选、项目编辑
涉及到的指令有： v-on v-show v-model v-text v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>奇妙清单：</h1>
<span><button @click="state='all'" type="button">所有 {{ taskLisk.length }}</button></span>
<span><button @click="state='done'" type="button">已经完成 {{ doneList.length }}</button></span>
<span><button @click="state='undo'" type="button">未完成 {{ taskLisk.length-doneList.length }}</button></span>
<h2>添加任务(按enter键进行添加哦)</h2>
<!-- 键盘点击事件 enter键确定添加 -->
<input type="text"@keyup.enter="addTask" v-model="newTaskName">
<h2>任务列表：</h2>
<div v-for="(item,index) in currentList">
<span v-show="editingTask==item">
<input type="text"
v-autofocus="flag"
@blur="cancel"
@keyup.esc="cancel"
@keyup.enter="confirm(index)"
v-model="editingName"
/>
</span>
<span v-show="editingTask != item">
<!-- 多选框 -->
<input type="checkbox" v-model="item.done"/>
<!-- 双击编辑功能 -->
<span @dblclick="editTask(index)">{{item.name}}</span>
<!-- 删除任务按钮 -->
<button type="button"@click="delTask(index)" >×</button>
</span>
</div>
</div>
<script type="text/javascript">
const vm= new Vue({
el:"#app",
data:{
newTaskName:"",
state:"all",
flag:true,
editingName:"",
editingTask:null,
taskLisk:[
{
name:" Learn Chinese",
done:true
},
{
name:" Learn AMaths",
done:true
},
{
name:" Learn English",
done:true
},
{
name:" Learn French",
done:false
}
]
},
methods:{
addTask(){
if(this.newTaskName.length<=0){
alert("添加内容不能为空哦")
}
else{
this.taskLisk.push({
name:this.newTaskName,
done:false
});
// 添加完成后清空输入框
this.newTaskName="";
}
},
delTask(index){
this.taskLisk.splice(index,1);
},
editTask(index){
this.editingTask=this.currentList[index];
this.editingName=this.currentList[index].name
},
cancel(){
this.editingTask=null;
},
confirm(index){
if(this.editingName.length<=0)
{
alert("The content cannot be empty！")
}
else
{
// 删除原有的任务,添加新的任务
this.taskLisk.splice(index,1,{name:this.editingName,done:false})
}
}
},
// 计算属性
computed:{
doneList(){
return this.taskLisk.filter((task)=>{
return task.done;
})
},
currentList(){
if(this.state=="all"){
return this.taskLisk
}
else if(this.state=="done"){
return this.doneList;
}
else
{
return this.taskLisk.filter( (task)=>{
return !task.done;
});
}
}
},
// 编辑框聚焦失焦事件
directives:{
autofocus:{
inserted:function(element,data){
if(data.value){
element.focus();
}
else
{
element.blur();
}
},
update:function(element,data){
if(data.value){
element.focus();
}
else
{
element.blur();
}
}
}
}
})
</script>
</body>
</html>
上一篇： 小米10不用抢了：今天预售 4299元
下一篇： 红曲是什么？你知道怎么做红曲米酒吗？