課程
/前端開發
/Vue.js
/vue2.5入門
直接點擊提交的話會產生<li></li>，怎么清除沒有內容的li呢？
2018-08-13
源自：vue2.5入門 3-2
正在回答
<!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>
<button @click="firstclick">點一下</button>
<button @click="clearclick">清理</button>
</tr>
<td>編號</td>
<td>姓名</td>
<td>操作</td>
<tr v-for="(item,index) of list">
<td>{{index}}</td>
<td>{{item}}</td>
<td><button @click="delect(index)">刪除</button></td>
</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)
舉報
快速理解Vue編程理念上手Vue2.0開發。
4 回答點擊li時如何在alert中顯示li的內容
4 回答為什么每次點擊都是刪除最后一個,而不是刪除點擊的那個li
1 回答為什么我的li綁上"handleClick"事件之后，提交按鈕就沒反應了呢
2 回答如何給li加一個點擊改變class事件
3 回答有一個問題，我發現如果input框里什么也不輸入時點擊提交仍然能創建一個空的li出來，請問怎么能檢測如果input中的值為空不創建li呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-10-10
<!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將這項刪除掉。
2018-08-21
methods:?{ ????handleClick:?function?()?{ ????????if?(this.inputValue)?{ ????????????this.list.push(this.inputValue); ????????????this.inputValue?=?''; ????????} ????} }handleClick時，檢查
是否為空值
2018-08-13
重新設一個按鈕，添加清除所有內容事件<button @click="handleDestroy">清除所有任務</button>，在父組件中實現刪除所有內容函數
handleDestroy:function(){
this.list.splice(0)
}