<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input v-model="inputValue"
@keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" />
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}</span>
<label>{{item}}</label>
<!-- 删除按钮 -->
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count" v-if="list.length!=0">
<strong>{{list.length}}</strong> items left
</span>
<button v-show="list.length!=0" class="clear-completed" v-on:click="clear">
Clear
</button>
</footer>
</section>
</body>
<script type="text/javascript" src="js/vue-2.6.12.js" ></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["啦啦呀","李易峰呀","吴亦凡呀","憨憨呀"],
inputValue:"娜娜家名单"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</html>
原文：https://www.cnblogs.com/lxn521/p/13728048.html