vue_组件化_TodoList工具
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app"> <!-- v-model input输入双向绑定数据 当用户输入数据，input发生改变时，输入的内容会自动保存到inputValue中 --> <input type="text" v-model="inputValue"> <button @click="handleClick">提交</button> <ul> <todo-item :content="item" v-for="item in list"></todo-item> </ul> </div></body><script type="text/javascript"> //全局组件 Vue.component(name, options) // Vue.component('TodoItem', { // props: ['content'], // template: `<li>{{this.content}}</li>` // }) //局部组件 let TodoItem = { props: ['content'], template: `<li>{{this.content}}</li>` } let app = new Vue({ el: '#app', data: { list: [], inputValue: '' }, //局部组件注册 components: { TodoItem }, methods: { handleClick () { this.list.push(this.inputValue) this.inputValue = '' } } })</script></html> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！