实现功能:在输入框中输入内容,点击提交后,内容在列表中出现,然后点击列表中的内容,对应列表会删除
<div id="demo" class="demo">
<input type="text" v-model="content">
<button v-on:click="submit">提交</button>
<ul>
<todo-list v-for="(item,index) in items" :item="item" :index="index" @delete="deleteThing"></todo-list>
</ul>
</div>
<script>
var TodoList = {
props: ['item', 'index'],
template: `<li @click='$emit("delete",index)'>{{item}}</li>`
}
var vm = new Vue({
el: '#demo',
components: {
TodoList: TodoList
},
data: {
items: ['1', '2'],
content: '',
},
methods: {
submit: function () {
this.items.push(this.content);
this.content = ''
},
deleteThing: function (index) {
this.items.splice(index, 1);
}
}
})
</script>
此处用到了:
局部组件:局部组件在Vue的components中申明才能使用
组件的传值(索引值的传递)
数组方法:splice的用法(index, 1),从索引值是几的位置裁剪1个