Vue的Todolist改进
程序员文章站
2022-03-26 14:35:42
```js 点击 ``` ......
<body>
<div id='app'>
<input type="text" v-model="inputvalue"/><br>
<input type="text" v-model:lazy="inputvalue"/>
<button v-on:click="handlebtnclick">点击</button>
<ul>
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleitemdelete">
</todo-item>
</ul>
</div>
<script>
// //全局组件
// vue.component("todoitem", {
// props:['content'],
// template: "<li>{{content}}</li>",
// })
//局部组件
var todoitem = {
props:['content','index'],
template: "<li @click='handleitemclick'>{{content}}</li>",
methods:{
handleitemclick:function(){
this.$emit("delete", this.index) //向父组件触发事件
}
}
}
var app = new vue({
el: '#app',
//注册组件（局部组件）
components:{
todoitem: todoitem
},
data: {
list: [],
inputvalue:''
},
methods: {
handlebtnclick: function () {
this.list.push(this.inputvalue)
this.inputvalue = ''
},
handleitemdelete: function(index) {
this.list.splice(index,1)
}
}
})
</script>
</body>