走进Vue的第五天

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todoList删除</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="inputValue">
        <input type="button" value="Go" @click="toList">

        <!--使用组件-->
        <ul>
            <!--监听delete事件(在实例中接收)-->
            <item-list v-for="(item,index) in list" :content="item" :index="index" @delete="toDel"></item-list>
        </ul>
    </div>

    <script>
        //定义全局组件
        Vue.component('item-list',{
            props:['content','index'],
            template:"<li>{{content}}&nbsp;&nbsp;&nbsp;&nbsp;<span @click='deleteData'>删除</span></li>",
            methods:{
                deleteData:function () {
                    //对外放开一个delete事件(然后在组件中监听)
                    this.$emit('delete',this.index);
                }
            }
        });

        new Vue({
            el:"#root",
            data:{
                inputValue:"",
                list:[]
            },
            methods:{
                toList:function () {
                    this.list.push(this.inputValue);
                    this.inputValue='';
                },
                toDel:function (index) {
                    this.list.splice(index,1);
                }
            }
        })
    </script>
</body>
</html>
posted @ 2019-07-25 16:52 车车大人阅读(213) 评论(1) 收藏举报
刷新页面返回顶部