vue小案例
阿新 • • 發佈:2020-12-13
####1.實現微博釋出刪除功能:
點選提交,在文字上方顯示要插入的內容
點選X刪除按鈕,刪除本條資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="/js/vue.js"></script> </head> <style> .content { width: 690px; height: 690px; margin: auto; } </style> <body> <div id="app"> <div class="content"> <textarea v-model='msg'></textarea> <button @click='add()'>提交</button> <ul> <li v-for='(v,i) in list'> <p>{{v}}<span @click='del(i)'>X</span></p> </li> </ul> </div> </div> <script type="text/javascript" src="/js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { list: [ '第一條資料', '第二條資料' ], msg: '' }, methods: { add: function() { this.list.unshift(this.msg); }, del: function(i) { this.list.splice(i, 1); } } }); </script> </body> </html>
####2,購物車,商品的增加與刪除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="/js/vue.js"></script> </head> <body> <div id="app"> 商品名稱: <input type="text" v-model='good'> 商品價格 <input type="text" v-model='price'> <button @click='add()'>增加</button> <table border="1px"> <tr> <th v-for='item in title'>{{item}}</th> </tr> <tr v-for='(v,i) in detail'> <td>{{i+1}}</td> <td>{{v.good}}</td> <td>{{v.price}}</td> <td><span @click='del(i)'>刪除</span></td> </tr> </table> </div> <script type="text/javascript" src="/js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { title: ['商品序號', '商品名稱', '商品價格', '刪除商品'], good: '', price: '', detail: [{ good: 'zhangsan', price: '18' }, { good: 'wmx', price: '20' } ] }, methods: { add: function() { var str = { good: this.good, price: this.price }; this.detail.unshift(str) }, del: function(i) { this.detail.splice(i, 1) } } }); </script> </body> </html>