直接点击提交的话会产生<li></li>，怎么清除没有内容的li呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
table{border-right:1px solid #F00;border-bottom:1px solid #F00;margin: 0 auto;}
table td{border-left:1px solid #F00;border-top:1px solid #F00}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<td>
<input type="text" v-model="Values"/>
</td>
<td>
<button @click="firstclick">点一下</button>
</td>
<td>
<button @click="clearclick">清理</button>
</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) of list">
<td>{{index}}</td>
<td>{{item}}</td>
<td><button @click="delect(index)">删除</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
Vue.component()
var vue=new Vue({
el: '#app',
data:{
Values : '',
list : []
},
methods : {
firstclick:function(){
this.list.push(this.Values);
this.Values='';
},
delect:function (index) {
this.list.splice(index,1);
},
clearclick:function(){
for(var i=0;i<this.list.length;i++){
if(!this.list[i]){
this.list.splice(i,1);
}
}
}
}
})
</script>
</body>
</html>
就增加一个方法“clearclick”，检查list数组里面有没有空值，如果有，就根据空值的index将这项删除掉。
methods: {
handleClick: function () {
if (this.inputValue) {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
}handleClick时，检查
this.inputValue
是否为空值
重新设一个按钮，添加清除所有内容事件<button @click="handleDestroy">清除所有任务</button>，在父组件中实现删除所有内容函数
handleDestroy:function(){
this.list.splice(0)
}