<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<section id="app">
<header class="header">
<h1>小黑记事本</h1>
<input v-model="todoName" placeholder="请输入任务" class="new-todo" />
<button @click="add" class="add">添加任务</button>
</header>
<section class="mian">
<ul class="to-list">
<li class="todo" v-for="(item,index) in list" :key="item.id">
<div class="view">
<span class="index">{{index+1}}.</span><label>{{item.name}}</label>
<button @click="del(item.id)" class="destroy">删除</button>
</div>
</li>
</ul>
</section>
<footer class="footer" v-show="list.length>0">
<span>合计：<strong>{{ list.length }}</strong></span>
<button @click="clear">清空</button>
</footer>
</section>
<script>
var app = new Vue({
el: '#app',
data: {
todoName:'',
list:[
{id:1,name:'跑步'},
{id:2,name:'游泳'},
{id:3,name:'跳绳'},
]
},
methods: {
clear(){
this.list=[]
},
del(id){
this.list =this.list.filter(item=>item.id!=id)
},
add(){
if(this.todoName.trim()===""){
alert("亲输入，不能够为空");
return;
}
// 头插法数组
this.list.unshift({
id: +new Date(),
name: this.todoName,
})
},
login() {
},
reset: function () {
this.username = "";
this.password = "";
}
}
})
</script>
</body>
</html>
文章来源：https://www.toymoban.com/news/detail-697092.html
文章来源地址https://www.toymoban.com/news/detail-697092.html
到了这里，关于Vue指令使用场景的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
