1. 完成todolist的案例，在todolist中实现隔行换色效果
奇数行的计划， 背景色为"blue"
偶数行的计划，背景色为"orange"
2. 使用vue.js完成表格的管理功能[添加数据，取消添加、展示商品列表，编辑商品信息，取消编辑，删除商品]
商品id默认使用下标作为值
提示： v-for显示商品列表，商品列表作为数组保存vm对象的data属性里面
添加商品和删除商品就是对数组的添加成员和删除指定下标成员
todolist
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <script src="../day04/vue.js"></script> <style type="text/css"> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div id="todolist" class="list_con"> <h2>To do list</h2> <input type="text" v-model="message" class="inputtxt"> <input type="button" @click="addItem" value="增加" class="inputbtn"> <ul id="list" class="list"> <li :bgcolor="key%2==0?‘blue‘:‘orange‘" v-for="(item,key) in dolist" > <span >{{item}}</span> <a @click="upItem(key)" class="up"> ↑ </a> <a @click="downItem(key)" class="down"> ↓ </a> <a @click="delItem(key)" class="del">删除</a> </li> </ul> </div> <script> var vm = new Vue({ el:"#todolist", data:{ message:"", dolist:[ "1", "2", "3", ], }, methods:{ addItem(){ if(this.message==""){ return false } this.dolist.push(this.message); this.message="" }, delItem(key){ this.dolist.splice(key,1); }, upItem(key){ if(key==0){ return false } var result = this.dolist.splice(key,1); this.dolist.splice(key-1,0,result[0]) }, downItem(key){ var result = this.dolist.splice(key,1); this.dolist.splice(key+1,0,result[0]) } } }) </script> </body> </html>
作业2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../day04/vue.js"></script> <style> #goods table{ width: 600px; border:1px solid #000; border-collapse: collapse; } #goods td,#goods th{ border: 1px solid #000; } #goods .box{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #eee; width: 280px; height: 160px; padding: 40px 80px; } #goods .box_display{ display:none } </style> </head> <body> <div id="goods"> <button @click="show_box">添加商品</button> <table> <tr> <th>商品id</th> <th>商品标题</th> <th>商品数量</th> <th>商品价格</th> <th>操作</th> </tr> <tr v-for="item,index in item_list"> <td>{{index}}</td> <td>{{item.name}}</td> <td> <button @click="sub">-</button> <input type="text" size="2" v-model="item.amount"> <button @click="++item.amount">+</button> </td> <td>{{item.price}}</td> <td> <button @click="show_box">编辑</button> <button @click="delItem">删除</button> </td> </tr> <tr> <td colspan="5" >总计： {{sum}}元</td> </tr> </table> <div :class="box_css"> 商品标题: <input type="text" v-model="name" id="name"><br><br> 商品数量: <input type="text" v-model="amount" id="amount"><br><br> 商品价格: <input type="text" v-model="price" id="price"><br><br> <button @click="addItem">保存</button> <button @click="editItem">bj</button> <button @click="hide_box">取消</button> </div> </div> <script> var vm = new Vue({ el:"#goods", data:{ box_css:{ box_display:true, box:false }, item_list:[ item_data={ id:1, name:‘iphone11‘, amount:1, price:4399, } ], id:‘‘, name:"", amount:"", price:"", sum:0 }, methods: { show_box() { this.box_css = { box_display: false, box: true } }, hide_box() { this.box_css = { box_display: true, box: false } }, sub(){ if(this.amount<=1){ this.amount=0; }else{ this.amount--; } }, addItem(index){ // if(this.name && this.amount && this.price){ // return false // } var item_data = { id:index, name: this.name, amount: this.amount, price: this.price, }; this.item_list.push(item_data); this.name=‘‘; this.amount=‘‘; this.price=‘‘; }, delItem(index){ this.item_list.splice(index,1) }, editItem(index){ item_data={ id:this.index, name:this.name, amount:this.amount, price:this.price, }; this.item_list.splice(item_data.id,1,item_data); this.name=‘‘; this.amount=‘‘; this.price=‘‘; }, } }) </script> </body> </html>
原文：https://www.cnblogs.com/heirenxilou/p/13163797.html