03 表单控制与购物车案例
day03 表单控制与购物车案例
一、表单控制
1、checkbox选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="password">
<p> <input type="checkbox" v-model="remember">记得密码</p>
</div>
</body>
<script>
var vm = new Vue({
el:'.app',
data:{
username:'',
password:'',
// 如果是checkbox，选择是true，不选中是false
remember:false
}
})
</script>
</html>
2、radio单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<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: '.app',
data: {
username: '',
password: '',
// 如果是radio，多个radio框要绑定同一个变量，radio的值是选择的value值
radio: ''
}
})
</script>
</html>
3、多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
// 因为在数据库中都是存的数字，对应该内容
<input type="checkbox" v-model="many" value="1">篮球
<input type="checkbox" v-model="many" value="2">足球
<input type="checkbox" v-model="many" value="3">棒球
<input type="checkbox" v-model="many" value="4">桌球
<br><br>您喜欢的球类：{{many}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
// 如果是多选，绑定的变量是数组，数组内容是value的值
many:[],
}
})
</script>
</html>
二、购物车案例
1、购物车案例-结算
<!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>选中/不选中</td>
</tr>
<tr v-for="item in good_list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item"></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: []
},
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
}
}
})
</script>
</html>
2、购物车案例-全选/全不选
<!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>{{item.count}}</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;
for (i in this.checkGroup) {
totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
}
return totalPrice
},
handelCheckALL(){
// 一种是全选，一种是全不选，选中是为true,不选中为false
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
}
}
},
})
</script>
</html>
3、购物车案例 - 数量加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.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 class="app col-md-4 col-md-offset-4 text-center">
<table class="table table-bordered">
<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 class="btn link btn-sm" @click="handleDown(item)">-</button>
{{item.count}}
<button class="btn link btn-sm" @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>
</div>
<div class="app">
</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;
//2 js的按迭代循环 【i是数组的索引值】
for (i in this.checkGroup) {
totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
}
return totalPrice
},
handelCheckALL() {
// 一种是全选，一种是全不选，选中是为true,不选中为false
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){
// 数量只能减少到1
if(item.count>1){
item.count--
}else {
alert('只能减到1')
}
}
},
})
</script>
</html>
三、v-model进阶
1、v-model 之 lazy、number、trim
lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model.lazy="name"> // 回车才显示
<hr>
{{name}}
<input type="text" v-model.number="age"> // 必须以数字开头
<hr>
{{age}}
<input type="text" v-model.trim="name"> // 去掉前后空格
<hr>
{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: '',
age: ''
},
})
</script>
</html>
浙公网安备 33010602011771号