Vue 练习 Demo(二): 组件化动态添加和删除元素

在原有基础上修改 div

<div id="app">
	<input v-model="inputValue" type="text" />
	<button @click="handleAddBtn">提交</button>
	<ul>
	    <todo-item 
	        :content="item"
	        :index="index"
	        v-for="(item,index) in list"
	        @delete="handleDeleteItem"
	        >
	    </todo-item>
	</ul>
</div>

创建子组件

let TodoItem = {
	// 需要传递的参数
    props: {
        content: this.content,
        index: this.index,
    },
    template: "<li @click='handleItemClick'>{{content}}</li>",
    methods: {
        handleItemClick() {
		       // 向父组件传递事件和参数
            this.$emit("delete", this.index)
        }
    },
}

let app = new Vue({
    el: '#app',
    components: {
        TodoItem
    },
    data: {
        list: [111, 222, 333],
        inputValue: ''
    },
    methods: {
        handleAddBtn() {
            this.list.push(this.inputValue)
            this.inputValue = ''
        },
        handleDeleteItem(index) {
            console.log(index)
            this.list.splice(index, 1)
        }
    },
})

效果展示

效果展示

上次更新时间: 2019/6/23 上午10:55:31