直接点击提交的话会产生<li></li>，怎么清除没有内容的li呢？
buyaolanduo
2018-08-13 22:41
直接点击提交的话会产生<li></li>，怎么清除没有内容的li呢？
3回答
-
- 慕圣2166340
- 2018-10-10 11:42:06
<!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将这项删除掉。
-
- jason6p
- 2018-08-21 23:36:02
methods: { handleClick: function () { if (this.inputValue) { this.list.push(this.inputValue); this.inputValue = ''; } } }handleClick时，检查
this.inputValue
是否为空值
-
- 慕粉1409334980
- 2018-08-13 23:45:32
重新设一个按钮，添加清除所有内容事件<button @click="handleDestroy">清除所有任务</button>，在父组件中实现删除所有内容函数
handleDestroy:function(){
this.list.splice(0)
}
vue2.5入门
146168 学习 · 655 问题
相似问题