<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> count : {{size}} <input type="text" v-model="inputValue"> <button @click="press">press</button> <ul> <todo-item :content="i" v-for="(i,index) in list" :index="index" @delete="deleteChild(index)"></todo-item> </ul> </div> <script> let todoItem = { props:['content'], template:'<li @click="press">{{content}}</li>', methods: { press(target) { this.$emit('delete') } } } const app = new Vue({ el:'#app', data:{ list:['第一','第二'], inputValue:'', count:0 }, components:{ TodoItem:todoItem }, methods:{ press: function () { // alert("press") this.list.push(app.$data.inputValue) this.inputValue = '' }, deleteChild:function (childNode) { console.log(childNode) this.list.splice(childNode,1) } }, watch:{ list:function (list,newlist) { this.count = newlist.length }, inputValue:function (oldVal,newVal) { console.log(newVal) } }, computed:{ size:{ get() { return this.count; }, set(value) { console.log(value) } } } }) </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥