checkbox和radio
checkbox 单选
1. 使用布尔存储数据
***代码展示***# html代码
<input type="checkbox" v-model="boole">
{{boole}}
#JavaScript 代码
data: {
boole: false,
},
checkbox 多选
1. 使用数组存储数据
***代码展示***# html代码
<input type="checkbox" v-model="car" value="奔驰">
<input type="checkbox" v-model="car" value="宝马">
<input type="checkbox" v-model="car" value="奥迪">
<input type="checkbox" v-model="car" value="保时捷">
{{car}}
#JavaScript 代码
data: {
car: [],
},
radio
1. 使用字符串存储数据
***代码展示***# html代码
<input type="radio" v-model="gender" value="男">
<input type="radio" v-model="gender" value="女">
<input type="radio" v-model="gender" value="人妖">
{{gender}}
#JavaScript 代码
data: {
gender: '',
},
购物车
代码展示
1. 两种取值方式
(1) 打开注释掉的代码，将this.func()函数注释掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
<style>
ul {
list-style: none;
}
table tr td a {
display: inline-block;
width: 20px;
height: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app01">
<table>
<tr>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>全选 <input type="checkbox" :checked="checkAllText" @input="checkAllBtn"></th>
</tr>
<tr v-for="(item, index) in productList" :key="index">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="decreaseNum(item)">-</button>
{{item.number}}
<button @click="increaseNum(item)">+</button>
</td>
<td><input type="checkbox" v-model="newProductList" :value="item" @input="checkOne"></td>
</tr>
</table>
{{total}}
<br>
<!-- {{func1()}} -->
<br>
</div>
</body>
<script>
let app = new Vue({
el: '#app01',
data() {
return {
total: 0,
newProductList: [],
checkAllText: false,
productList: [
{ name: '牙刷', price: 8, number: 1 },
{ name: '杯子', price: 45, number: 1 },
{ name: '衣服', price: 300, number: 1 },
{ name: '鞋子', price: 350, number: 1 },
{ name: '电脑', price: 7300, number: 1 },
]
}
},
methods: {
func() {
setTimeout(() => {
let total = 0
for (let i = 0; i < this.newProductList.length; i++) {
const element = this.newProductList[i];
total += element.price * element.number
}
this.total = total
})
},
// func1(){
// let total = 0
// for (let i = 0; i < this.newProductList.length; i++) {
// const element = this.newProductList[i];
// total += element.price * element.number
// }
// return total
// },
checkOne() {
setTimeout(() => {
if (this.newProductList.length == this.productList.length) {
this.checkAllText = true
} else {
this.checkAllText = false
}
}, 1)
this.func()
},
checkAllBtn() {
this.checkAllText = !this.checkAllText
if (this.checkAllText == true) {
this.newProductList = this.productList
} else {
this.newProductList = []
}
this.func()
},
increaseNum(item) {
item.number++
this.func()
},
decreaseNum(item) {
if (item.number <= 1) {
return
} else {
item.number--
}
this.func()
}
},
})
</script>
</html>
