2018-09-20用组件做出用户删除和添加

同样是用组件嵌套：

<div id="app">
    <you-mother></you-mother>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('you-mother',{
        template:`
                <div>
                    <input type="text" v-model="msg">
                    <button @click="str">点击</button>
                    <you-child v-bind:biglist="list"></you-child>
                </div>
        `,
        data:function(){
            return{
                list:["吃饭","睡觉","打豆豆"],
                msg:""
            }
        },
        methods:{
            str:function(){
                this.list.push(this.msg);
                this.msg=""
            }
        }
    });
    Vue.component('you-child',{
        props:["biglist"],
        template:`
        <ol>
            <li v-for="(value,index) in biglist">{{value}} <button @click="add(index)">删除</button></li>
        </ol>
        `,
        methods:{
            add:function(ind){//ind 形参
                this.biglist.splice(ind,1)
            }

        }
    });
    new Vue({
        el:"#app"
    });
</script>

结果如下：

QQ截图20180920112501.png