任务列表中,有多个可选项,直接单击进行修改。功能实现。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue1-0918</title> <style> .color1{ color: skyblue; } .deletedline{ background: #ccc; color: red; text-decoration: line-through; } </style> </head> <body> <h1>vue测试!</h1><br> <div id="div1"> <h1>这是view层</h1> <h2>测试:双向绑定!</h2> <h2>{{message}}</h2> <h2>{{teacherListJson[0].name}}</h2> <br> message<input type="text" v-model="message" name="msg"><br> obj.name<input type="text" v-model="obj.name" name="name"><br> jsonList<input type="text" v-model="teacherListJson[0].name" name="jsonlist1"> <h2>测试:button.click方法、监听事件</h2> <button @click="fn1">测试message</button> <button @click="fn2('abc')">测试btn的传参</button> <br> <h2>测试:if语句</h2> <h3 v-if="isComeBack">你快回来</h3> <h3 v-if="!isFinished">活没干完呢</h3> <h3 v-else>活干完了</h3> <h3>---------------------------------</h3> <h3 v-if="obj.age>17">你成年了:{{obj.age}}岁了。</h3> <br> <h2>测试v-show</h2> <h3 v-show="obj.age>20">你是未成年人:才{{obj.age}}</h3> <!--<h3 v-else>{{obj.age}}岁了,老大不小了</h3>--> <h2>测试v-for</h2> <table> <thead style="color: blue;background-color: coral"> <th>行号</th> <th>Id号</th> <th>Name</th> <th>Age</th> </thead> <tbody> <tr v-for="(item,index) in teacherListJson"> <td>{{index+1}}</td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </tbody> </table> <h2>测试:v-bind</h2> <h3>数据分页行 示例</h3> <h3> <ul class="pagination"> <li v-for="n in pageCount"> <a href="javascripit:void(0)" v-bind:class="activeNumber===n+1?'active':''">{{n}}</a> </li> </ul> </h3> <h2>综合测试</h2> <h3> </h3> </div> <div id="div2"> <h3>测试:任务列表</h3> <p>任务数:{{todoList.length}},还有{{countLeavingRows()}}个未完成 <button @click="delRowMore()">删除</button></p> <ul style="list-style: none"> <li v-for="(item,index) in todoList" v-bind:class="{deletedline:item.isDo}" > <input type="checkbox" v-model="item.isDo"> <!--默认显示项--> <span v-show="item.isEdit" v-text="item.desc" @click="toggleShowModify(index)"></span> <!--修改栏,先隐藏--> <input v-show="!item.isEdit" type="text" v-model="item.desc" @blur="item.isEdit=true"> </li> <input type="text" v-model="newLine.desc"> <button @click="addRow()">添加一行</button> </ul> </div> </body> <script src="js/vue.js"></script> <script> <!--这是model层的数据--> var exampleData={ isComeBack:true, isFinished:false, message:'hello world!', arr1:["吃饭","睡觉","打恒大"], obj:{name:'tom', age:18}, teacherListJson:[{id:21,name:"jack陈",age:19},{id:32,name:"司马青云",age:26},{id:63,name:"jackson",age:28}], activeNumber:0, pageCount:10 }; // ViewModel vue实例1 var v1= new Vue({ el:'#div1', data: exampleData, methods:{ fn1:function(){ console.log("fn1,clicked!"); alert(this.message); }, fn2:function(msg){ console.log("传入的参数是:"+ msg); alert("传入的参数是:"+ msg); }, createPerson: function(){ this.people.push(this.newPerson); // 添加完newPerson对象后,重置newPerson对象 this.newPerson = {name: '', age: 0, sex: 'Male'} }, deletePerson: function(index){ // 删一个数组元素 this.people.splice(index,1); }, } }); //v2:任务列表 var v2Data={ isShowline:true, lineInfo:'', v2Arr:["吃饭","睡觉","打恒大"], newLine:{id:0,desc:'',isDo:false}, //单行任务 todoList:[{id:21,desc:"接人",isDo:false,isEdit:true},{id:22,desc:"送人",isDo:false,isEdit:true},{id:26,desc:"打人",isDo:false,isEdit:true}] }; var v2= new Vue({ el:'#div2', data: v2Data, methods: { addRow: function(){ this.todoList.push(this.newLine); //增加一行 // newLine,重置newLine对象 this.newLine = {id:0,desc:'',isDo:false} }, delRow:function (index) { this.todoList.splice(index); //删除一行 }, delRowMore:function () { //删除多行 for (var i=this.todoList.length-1;i>=0;i--){ console.log(i); console.log("isDo:"+ this.todoList[i].isDo); if (this.todoList[i].isDo){ this.todoList.splice(i,1); } } }, countLeavingRows:function () { var num=0; this.todoList.forEach(function (item) { if (!item.isDo){ num++; } } ) return num; //有几个被选中 }, toggleShowModify(index){ console.log("click!!!") // this.isShowline=false; //显示 修改栏 console.log("index:"+ index); console.log("isEdit:"+ this.todoList[index].isEdit); this.todoList[index].isEdit=false; }, } }); </script> </html>