10 vue之表单控制+购物车案列
1 checkbox
如果只有一个checkbox，绑定的值就是true和false
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" placeholder="请输入用户名："><br> <input type="password" placeholder="请输入密码："><br> <input type="checkbox" v-model="radio">记住用户名 </div> </body> <script> var vm = new Vue({ el: '#app', data: { radio:false }, }) </script> </html>
2 单选
radio单选，是字符串，选中谁，字符串就变成选中的value值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <input type="radio" v-model="radio" value="男">男 <input type="radio" v-model="radio" value="女">女 <input type="radio" v-model="radio" value="保密">保密 <br><br>您选择的性别：{{radio}} </div> </body> <script> var vm = new Vue({ el: '#box', data: { radio: '', }, }) </script> </html>
3 多选
checkbox多选，绑定的值是数组，选择以后，数组中放选中的value值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <input type="checkbox" v-model="many" value="篮球">篮球 <input type="checkbox" v-model="many" value="足球">足球 <input type="checkbox" v-model="many" value="棒球">棒球 <input type="checkbox" v-model="many" value="桌球">桌球 <br><br>您喜欢的球类：{{many}} </div> </body> <script> var vm = new Vue({ el: '#box', data: { many: [], }, }) </script> </html>
4 购物车案例 - 结算
let定义的变量只在当前作用域有效，var定义的变量：console.log(a) var a=10在python中不允许，但是在js中允许，用var定义的有个作用域，在函数外部定义的在函数内部也能用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <style> table, td { border: 1px solid black; text-align: center; } </style> </head> <body> <div id="app"> <table> <tr> <td>商品名称</td> <td>价格</td> <td>数量</td> <td>选择</td> </tr> <tr v-for="item in dataList"> <td>item.name</td> <td>{{item.price}}</td> <td>{{item.number}}</td> <td><input type="checkbox" v-model="checkGroup" :value="item"></td> //:value="item"绑定的是变量 </tr> </table> <br>已选商品：{{checkGroup}} <br>总价：{{getPrice()}} </div> </body> <script> let vm = new Vue({ el: '#app', data: { dataList:[ {name: '今瓶没', price: 99, number: 2}, {name: '西柚记', price: 59, number: 1}, {name: '水壶转', price: 89, number: 5}, ], checkGroup: [], }, methods: { getPrice(){ let sum_price = 0 for (let i in this.checkGroup) { // 这里的 i 是索引 sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price'] } return sum_price } } }) </script> </html>
5 购物车案例 - 全选/全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <style> table, td { border: 1px solid black; text-align: center; } </style> </head> <body> <div id="app"> <table> <tr> <td>商品名称</td> <td>价格</td> <td>数量</td> <td>选择 <input type="checkbox" v-model="checkAll" @change="handleAll"></td> </tr> <tr v-for="item in dataList"> <td>item.name</td> <td>{{item.price}}</td> <td>{{item.number}}</td> <td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td> </tr> </table> <br>已选商品：{{checkGroup}} <br>总价：{{getPrice()}} </div> </body> <script> let vm = new Vue({ el: '#app', data: { dataList:[ {name: '今瓶没', price: 99, number: 2}, {name: '西柚记', price: 59, number: 1}, {name: '水壶转', price: 89, number: 5}, ], checkGroup: [], checkAll:false, }, methods: { getPrice(){ let sum_price = 0 for (let i in this.checkGroup) { // 这里的 i 是索引 sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price'] } return sum_price }, handleAll(){ if(this.checkAll){ this.checkGroup=this.dataList }else { this.checkGroup=[] } }, handleOne(){ if (this.checkGroup.length==this.dataList.length){ this.checkAll=true }else { this.checkAll=false } }, } }) </script> </html>
6 购物车案例 - 数量加减
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="row"> <div id="app" class="col-md-4 offset-md-1 text-center mt-5 "> <table class="table table-bordered"> <thead> <tr> <td>商品名称</td> <td>价格</td> <td>数量</td> <td>选择 <input type="checkbox" v-model="checkAll" @change="handleAll"></td> </tr> </thead> <tbody> <tr v-for="item in dataList"> <td>item.name</td> <td>{{item.price}}</td> <td> <button class="btn link btn-sm" @click="handleReduce(item)">-</button> {{item.number}} <button class="btn link btn-sm" @click="item.number++">+</button> </td> <td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td> </tr> <tr class="text-left"> <td colspan="4">总价：{{getPrice()}} </tr> </tbody> </table> </div> </div> </body> <script> let vm = new Vue({ el: '#app', data: { dataList: [ {name: '今瓶没', price: 99, number: 2}, {name: '西柚记', price: 59, number: 1}, {name: '水壶转', price: 89, number: 5}, ], checkGroup: [], checkAll: false, }, methods: { getPrice() { let sum_price = 0 for (let i in this.checkGroup) { // 这里的 i 是索引 sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price'] } return sum_price }, handleAll() { if (this.checkAll) { this.checkGroup = this.dataList } else { this.checkGroup = [] } }, handleOne() { if (this.checkGroup.length == this.dataList.length) { this.checkAll = true } else { this.checkAll = false } }, handleReduce(item) { if (item.number == 1) { item.number = 1 }else { item.number-- } }, } }) </script> </html>
课堂案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div class="app"> <table border="1"> <tr> <td>商品名称</td> <td>商品价格</td> <td>商品数量</td> <td>选中/不选中 <input type="checkbox" v-model="checkAll" @change="handelCheckALL"></td> </tr> <tr v-for="item in good_list"> <td>{{item.name}}</td> <td>{{item.price}}</td> <td><button @click="handleDown(item)">-</button>{{item.count}} <button @click="item.count++">+</button></td> <td><input type="checkbox" v-model="checkGroup" :value="item" @change="checkOne"></td> </tr> </table> <h2>您选中的商品有：{{checkGroup}}</h2> <h2>总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}</h2> <!-- <h3>{{checkAll}}</h3>--> </div> </body> <script> var vm = new Vue({ el: '.app', data: { good_list: [ {name: '特斯拉', price: 102304, count: 2}, {name: '钢笔', price: 6, count: 3}, {name: '鸡蛋', price: 2, count: 5}, {name: '鞋子', price: 299, count: 7}, {name: '衬衣', price: 189, count: 4}, ], checkGroup: [], checkAll:false }, methods: { getPrice() { // 计算选中的商品总价格 let totalPrice = 0 // 1 js老循环方式（按索引循环） // for (i = 0; i < this.checkGroup.length; i++) { // totalPrice += this.checkGroup[i].price * this.checkGroup[i].count // } //2 js的按迭代循环 【i是数组的索引值】 for (i in this.checkGroup) { // console.log(i) totalPrice += this.checkGroup[i].price * this.checkGroup[i].count } return totalPrice }, handelCheckALL(){ //一个是全选了，一个是全不选 if(this.checkAll){ this.checkGroup=this.good_list }else { this.checkGroup=[] } }, checkOne(){ if(this.checkGroup.length==this.good_list.length){ //全选 this.checkAll=true }else { this.checkAll=false } }, handleDown(item){ if(item.count>1){ item.count-- }else { alert('太少了，我受不了了') } } } }) </script> </html>
