查看“Vue案例:任务列表之编辑数据”的源代码
←
Vue案例:任务列表之编辑数据
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==总体思路== *实现表单数据的绑定 *表单和文字只显示一个 *当聚焦的时候显示表单 *失去焦点的时候显示文字 ==实现数据绑定== ===效果图=== [[文件:vue2023033101.png|600px]] ===原理=== 设置v-model ,实现数据双向绑定 表单数据变了,前面的文字也会跟着变。 ===代码=== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script> <title></title> </head> <body><div id="app">> <div class="home"> <h2>任务列表</h2> <ul> <li v-for="(item,index) in tasklist" :key="index" :class="{finish:item.isFinish}"> <input type="checkbox" v-model="item.isFinish"> <span >{{item.title}}</span> <input type="text" v-model="item.title" > </li> </ul> <div> 任务总数:{{tasklist.length}} 还有{{finishCount}}未完成:【<a href="#" @click="finishFn">完成</a>】 </div> <div> <input type="text" placeholder="请输入任务名称" v-model="taskname"> <button @click="addFn">添加</button> </div> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { tasklist:[ {title:"预习vuex知识点",isFinish:false,isEdit:false}, {title:"预习vuex知识点2",isFinish:false,isEdit:true}, {title:"预习vuex知识点3",isFinish:false,isEdit:false}, ], taskname:"" }, computed:{ finishCount(){ let count = 0; this.tasklist.forEach(item=>{ if(!item.isFinish){ count++; } }) return count } }, methods:{ finishFn(){ console.log("hello") let arr = this.tasklist.filter(item=>item.isFinish==false); console.log(arr); this.tasklist = arr; }, addFn(){ console.log(this.taskname) this.tasklist.push({title:this.taskname,isFinish:false}) this.taskname=""; } } }) </script> <style > *{ margin:0; } .home{ width:400px; margin:0 auto; background-color:pink; line-height:30px; padding:10px; } h2{ text-align:center; } ul { text-align:left; } ul li{ list-style:none; } .finish{ color:gray; text-decoration:line-through } </style> </body> </html></nowiki> ==表单和文字只显示一个== ===效果图=== [[文件:vue2023033102.png|600px]] ===原理=== 设置属性v-show 当v-show为真时显示表单 当v-show为false时显示文字。 ===代码=== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script> <title></title> </head> <body><div id="app">> <div class="home"> <h2>任务列表</h2> <ul> <li v-for="(item,index) in tasklist" :key="index" :class="{finish:item.isFinish}"> <input type="checkbox" v-model="item.isFinish"> <span v-show="!item.isEdit" >{{item.title}}</span> <input type="text" v-model="item.title" v-show="item.isEdit"> </li> </ul> <div> 任务总数:{{tasklist.length}} 还有{{finishCount}}未完成:【<a href="#" @click="finishFn">完成</a>】 </div> <div> <input type="text" placeholder="请输入任务名称" v-model="taskname"> <button @click="addFn">添加</button> </div> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { tasklist:[ {title:"预习vuex知识点",isFinish:false,isEdit:false}, {title:"预习vuex知识点2",isFinish:false,isEdit:true}, {title:"预习vuex知识点3",isFinish:false,isEdit:false}, ], taskname:"" }, computed:{ finishCount(){ let count = 0; this.tasklist.forEach(item=>{ if(!item.isFinish){ count++; } }) return count } }, methods:{ finishFn(){ console.log("hello") let arr = this.tasklist.filter(item=>item.isFinish==false); console.log(arr); this.tasklist = arr; }, addFn(){ console.log(this.taskname) this.tasklist.push({title:this.taskname,isFinish:false}) this.taskname=""; } } }) </script> <style > *{ margin:0; } .home{ width:400px; margin:0 auto; background-color:pink; line-height:30px; padding:10px; } h2{ text-align:center; } ul { text-align:left; } ul li{ list-style:none; } .finish{ color:gray; text-decoration:line-through } </style> </body> </html> </nowiki> ==聚焦的时候显示表单== ===效果图=== [[文件:vue2023033103.png|600px]] ===原理=== 给列表项设置触发函数, @click="item.isEdit=true" 一点击列表项,isEdit=true,变成表单的形式。 ===源代码=== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script> <title></title> </head> <body><div id="app">> <div class="home"> <h2>任务列表</h2> <ul> <li v-for="(item,index) in tasklist" :key="index" :class="{finish:item.isFinish}"> <input type="checkbox" v-model="item.isFinish"> <span v-show="!item.isEdit" @click="item.isEdit=true">{{item.title}}</span> <input type="text" v-model="item.title" v-show="item.isEdit"> </li> </ul> <div> 任务总数:{{tasklist.length}} 还有{{finishCount}}未完成:【<a href="#" @click="finishFn">完成</a>】 </div> <div> <input type="text" placeholder="请输入任务名称" v-model="taskname"> <button @click="addFn">添加</button> </div> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { tasklist:[ {title:"预习vuex知识点",isFinish:false,isEdit:false}, {title:"预习vuex知识点2",isFinish:false,isEdit:false}, {title:"预习vuex知识点3",isFinish:false,isEdit:false}, ], taskname:"" }, computed:{ finishCount(){ let count = 0; this.tasklist.forEach(item=>{ if(!item.isFinish){ count++; } }) return count } }, methods:{ finishFn(){ console.log("hello") let arr = this.tasklist.filter(item=>item.isFinish==false); console.log(arr); this.tasklist = arr; }, addFn(){ console.log(this.taskname) this.tasklist.push({title:this.taskname,isFinish:false}) this.taskname=""; } } }) </script> <style > *{ margin:0; } .home{ width:400px; margin:0 auto; background-color:pink; line-height:30px; padding:10px; } h2{ text-align:center; } ul { text-align:left; } ul li{ list-style:none; } .finish{ color:gray; text-decoration:line-through } </style> </body> </html></nowiki> ==失焦的时候变成文字== ===效果图=== [[文件:vue2023033104.png|600px]] [[文件:vue2023033105.png|600px]] ===原理=== 给表单项设置失焦事件, @blur="item.isEdit=false" 失去焦点时item.isEdit=false ,显示普通文字。 ===源代码===
返回至
Vue案例:任务列表之编辑数据
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息