vueでは簡単なtodolist機能、todolistコンポーネントの分割、todolistの削除機能を実現
4346 ワード
- {{item}}
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
submit:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
「input」入力ボックスと「inputValue」データの双方向バインド
clickイベントでは、「inputValue」の内容が「list」に追加されます.
リストにデータを追加するpush()this.list.pust(this.inputValue)
「リスト」を追加するたびに、inputコンテンツを空にします.
Vue.component('todo-item',{
template:'<li>item<li>'
})
new Vue({
el:"root"
})
var TodoItem={
template:'<li>item<li>'
}
new Vue({
el:"root",
components:{
'todo-item':TodoItem
}
})
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=' '
}
}
})
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)
}
}
})