vue实现一个 todoList
v-model数据双向绑定，在 data里面注册
v-on:click=“function” function在 methods 里面注册
v-for 遍历列表元素
Hello world
div#app{
margin: auto;
}
var app = new Vue({
el:'#app',
data:{
list:['1.学习vue','2.学习bootstrap'],
todoValue:""
},
methods:{
addOneTask:function() {
console.log("click")
// this.todoValue
this.list.push(this.todoValue);
this.todoValue="";
}
}
});
作者：.GEEK
1.实现一个todo List
- {{i}}
目录结构：
使用vue注册子组件 实现一个 todoList
```java
Hello world
div#app{
margin: auto;
}
<!-- - {{i}}
-->
//创建了一个子组件
var TodoItem = {
props:['content'],
template:"{{content}} "
}
var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
todoValue:""
},
methods:{
addOneTask:function() {
console.log("click")
// this.todoValue
this.list.push(this.todoValue);
this.todoValue="";
}
}
});
Hello world
div#app{
margin: auto;
}
<!-- - {{i}}
-->
//创建了一个子组件
var TodoItem = {
props:['content',"index"],
template:"{{content}} ",
methods:{
handleItem:function(){
this.$emit("delete",this.index);//向父组件发出 delete事件,对应@delete
//v-bind:index 也可以写出 :index
}
}
}
var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
todoValue:""
},
methods:{
addOneTask:function() {
console.log("click")
// this.todoValue
this.list.push(this.todoValue);
this.todoValue="";
},
handleItem:function(index)
{
alert(index);
this.list.splice(index,1);
}
}
});
作者：.GEEK
相关文章
Ady
2020-03-21
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20