zoukankan html css js c++ java

Vue基础练习之Todo List

<body>
   <div id = "app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
          <!-- <li v-for="item in list">{{item}}</li>-->
           <todo-item v-bind:content="item"
                       v-bind:index="index"
                       v-for="(item,index) in list"
                       @delete = "handleItemDelete"><!--监听事件-->
           </todo-item>
       </ul>
   </div>
   <script>
       /*Vue.component("TodoItem",{//全局组件
           props:["content"],
          template :"<li>{{content}}</li>"
       })*/
        var TodoItem = {
            //局部组件，需要在实例中声明
            props:["content","index"],
            template :"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function () {
                    this.$emit("delete",this.index);//触发事件
                }
            }
        }

        var app =new Vue({//创建实例
            el:"#app",//实例负责管理的dom区域
            components:{
                //子组件声明
              TodoItem: TodoItem,
            },
            data:{
                list: [],
                inputValue: ""
            },
            methods:{
                handleBtnClick:function () {
                    this.list.push(this.inputValue);
                    this.inputValue="";
                },

                handleItemDelete:function (index) {
                    this.list.splice(index,1);
                }
            }
        })



   </script>

</body>

查看全文

相关阅读:
大话设计模式--中介者模式
 大话设计模式--职责链模式
 大话设计模式--命令模式
 大话设计模式--桥接模式
 迷宫求解
 stuct、class、typedef
软件测试
 Scrapy初探
 python练习
 链表基础

原文地址：https://www.cnblogs.com/hyds/p/11289287.html