上一篇:Vue的指令
https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5501
本篇所需指令: v- for v-model v-on v-show
目录
删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<header>
<h1>记事本</h1>
<input placeholder="请输入任务" />
<button class="add">添加任务</button>
</header>
<section class="main">
<div class="main">
<ul class="do-list">
<li class="todo" v-for="(item,index) in list" :key="item.id">
<div class="view">
<span class="index">{{index+1}}.</span><label>{{item.text}}</label>
<button @click="del(item.id)" class="destroy" >x</button>
</div>
</li>
</ul>
</div>
</section>
<footer class="footer">
<span class="count">合计:<strong>2</strong></span>
<button class="clear" >清空任务</button>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
list:[
{id:1,text:'记得带语文书'},
{id:2,text:'记得带数学书'},
]
},
methods:{
del(id){
this.list=this.list.filter(item=> item.id!==id)
}
}
});
</script>
</body>
</html>
添加功能
add(){
if(this.thing.trim()===''){
alert('请输入任务名称')
return
}
this.list.unshift({
id:"",
text: this.thing,
})
}
这里主要使用了v-model指令,通过v-model指令绑定输入框,获取表单元素的内容
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
统计功能
核心是计算数组的长度
清空功能
原理: 点击清空按钮,将原数组变为空数组
v-show
当点击清空按钮的时候,将底部隐藏
all-functions
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <header> <h1>记事本</h1> <input v-model="thing" placeholder="请输入任务" /> <button @click="add()">添加任务</button> </header> <section class="main"> <div class="main"> <ul class="do-list"> <li class="todo" v-for="(item,index) in list" :key="item.id"> <div class="view"> <span class="index">{{index+1}}.</span><label>{{item.text}}</label> <button @click="del(item.id)" class="destroy" >x</button> </div> </li> </ul> </div> </section> <footer class="footer" v-show="list.length>0"> <span class="count">合计:<strong>{{list.length}}</strong></span> <button @click="clear()" >清空任务</button> </footer> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ thing:'', list:[ {id:1,text:'记得带语文书'}, {id:2,text:'记得带数学书'}, ] }, methods:{ del(id){ this.list=this.list.filter(item=> item.id!==id) }, add(){ if(this.thing.trim()===''){ alert('请输入任务名称') return } this.list.unshift({ id:"", text: this.thing, }) }, clear(){ this.list=[] } } }); </script> </body> </html>