“Vue案例:任务列表之编辑数据”的版本间的差异
来自CloudWiki
第1行: | 第1行: | ||
− | == | + | ==总体思路== |
+ | *实现表单数据的绑定 | ||
+ | *表单和文字只显示一个 | ||
+ | *当聚焦的时候显示表单 | ||
+ | *失去焦点的时候显示文字 | ||
+ | |||
+ | ==实现数据绑定== | ||
===效果图=== | ===效果图=== | ||
[[文件:vue2023033101.png|600px]] | [[文件:vue2023033101.png|600px]] | ||
第108行: | 第114行: | ||
</html></nowiki> | </html></nowiki> | ||
− | == | + | ==表单和文字只显示一个== |
===效果图=== | ===效果图=== | ||
[[文件:vue2023033102.png|600px]] | [[文件: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> |
2023年3月30日 (四) 22:56的版本
总体思路
- 实现表单数据的绑定
- 表单和文字只显示一个
- 当聚焦的时候显示表单
- 失去焦点的时候显示文字
实现数据绑定
效果图
原理
设置v-model ,实现数据双向绑定
表单数据变了,前面的文字也会跟着变。
代码
<!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>
表单和文字只显示一个
效果图
原理
设置属性v-show
当v-show为真时显示表单
当v-show为false时显示文字。
代码
<!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>