10 vue之表单控制+购物车案列
1 checkbox
如果只有一个checkbox，绑定的值就是true和false
"en"> "UTF-8">Title "app"> "text" placeholder="请输入用户名：">
"password" placeholder="请输入密码：">
"checkbox" v-model="radio">记住用户名
2 单选
radio单选，是字符串，选中谁，字符串就变成选中的value值
"en"> "UTF-8">单选 "box"> "radio" v-model="radio" value="男">男 "radio" v-model="radio" value="女">女 "radio" v-model="radio" value="保密">保密
您选择的性别：{{radio}}
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>Titletitle>
<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.nametd>
<td>{{item.price}}td>
<td>{{item.number}}td>
<td><input type="checkbox" v-model="checkGroup" :value="item">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: [],
},
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>Titletitle>
<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.nametd>
<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>Titletitle>
<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.nametd>
<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>Titletitle>
<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>
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>