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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步