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)
        }
    },
})

效果展示

效果展示

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 3,064评论 0 24
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 10,874评论 0 33
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,384评论 1 84
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 3,200评论 1 23
  • 一、组件使用中的细节 1、使用 is 解决 h5 标签上的一些小 bug 面代码中,我们创建了一个全局组件 row...
    LK30265阅读 119评论 0 2