溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
•簡單todolist功能的實現
用戶點擊提交按鈕時，將input框的內容顯示在下方的list中，同時清空list中內容。
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="submit">submit</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
submit:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
</script>
</body>
“input”輸入框和“inputValue”數據雙向綁定
通過click事件，來講"inputValue"中的內容添加到"list"中
向列表中添加數據用 push( ) this.list.pust(this.inputValue)
每次添加"list"后，把input內容清空
•todolist組件拆分
1. Vue.component是全局組件，是vue提供的創建組件的方法。里面可以寫模板：template
2. 創建組件之后，可以直接使用。比如創建的組件名字是'todo-item'，就可以使用<todo-item></todo-item>
3.
<div id="root">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
template:'<li>item<li>'
})
new Vue({
el:"root"
})
</script>
4.局部組件var TodoItem={}這里只寫了部分代碼
5.
div id="root">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
var TodoItem={
template:'<li>item<li>'
}
new Vue({
el:"root",
components:{
'todo-item':TodoItem
}
})
</script>
6.
如果想在其他vue里面使用這個局部組件，需要在vue里對該局部組件進行注冊
7.當用組件來實現最上面的那個todolist功能時，需要進行參數的傳遞和接收，用content和props
8.
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="submit">submit</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}<li>'
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
submit:function(){
this.list.push(this.inputValue)
this.inputValue=' '
}
}
})
</script>
</body>
9.
這里面用content來傳遞item的值，用props來接收content的值。實現數據的傳遞功能
• todolist的刪除功能
1.
繼續上面的代碼，當點擊list數據的時候，實現list的刪除功能
2.
首先來捋一下邏輯：創建的最外層的大組件/實例中使用了一個小的組件todoitem，我們可以認為最外層的大組件為父組件，里面的小組件為子組件。
3.
我們在父組件中通過屬性的形式給子組件傳遞了具體的內容，然后子組件進行接收父組件傳遞的內容，然后在子組件的模板中進行顯示。
4.
要想實現子組件中數據的刪除，需要刪除父組件中對應的數據。當點擊子組件的數據時，要實現子組件和父組件的通信，來在父組件中進行刪除對應數據的操作。
5.
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="submit">submit</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @clicl="handleClick">{{content}}<li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue='',
list=[]
},
methods:{
submit:function(){
this.list.push(this.inputValue)
this.inputValue=' '
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
總結
以上所述是小編給大家介紹的vue實現todolist功能、todolist組件拆分及todolist的刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
