表单控制
checkbox选中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkboxtitle>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="box">
<input type="text" placeholder="请输入用户名："><br>
<input type="password" placeholder="请输入密码："><br>
<input type="checkbox" v-model="radio">记住用户名
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
myText: '',
textBig: '',
radio: false,
},
})
script>
html>
单选
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>
多选
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>
购物车案例 - 结算
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>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
style>
head>
<body>
<div id="box">
<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" :value="item" v-model="checkGroup">td>
tr>
table>
<br>已选商品：{{checkGroup}}
<br>总价：{{getPrice()}}
div>
body>
<script>
var vm = new Vue({
el: '#box',
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 (i in this.checkGroup) { // 这里的 i 是索引
sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
}
return sum_price
}
}
})
script>
html>
购物车案例 - 全选/全不选
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>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
style>
head>
<body>
<div id="box">
<table>
<tr>
<td>商品名称td>
<td>价格td>
<td>数量td>
<td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll">td>
tr>
<tr v-for="item in dataList">
<td>{{item.name}}td>
<td>{{item.price}}td>
<td>{{item.number}}td>
<td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne">td>
tr>
table>
<br>已选商品：{{checkGroup}}
<br>总价：{{getPrice()}}
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
allChecked: false,
},
methods: {
getPrice() {
let sum_price = 0
for (i in this.checkGroup) { // 这里的 i 是索引
sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
}
return sum_price
},
checkAll() {
if (this.checkGroup.length > 0) {
this.checkGroup = []
} else {
this.checkGroup = this.dataList
}
},
checkOne() {
// if (this.checkGroup.length === this.dataList.length) {
// this.allChecked = true
// } else {
// this.allChecked = false
// }
this.allChecked = this.checkGroup.length === this.dataList.length;
}
}
})
script>
html>
购物车案例 - 数量加减
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>
<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="box" class="col-md-4 offset-md-1 text-center mt-5 ">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">商品名称th>
<th scope="col">单价th>
<th scope="col">数量th>
<th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll">th>
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="reduceNum(item)">-button>
{{item.number}}
<button class="btn link btn-sm" @click="item.number++">+button>
td>
<td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne">td>
tr>
<tr class="text-left">
<td colspan="4">总价：{{getPrice()}}
tr>
tbody>
table>
div>
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 1},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 1},
],
checkGroup: [],
allChecked: false,
},
methods: {
getPrice() {
let sum_price = 0
for (i in this.checkGroup) {
sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
}
return sum_price
},
checkAll() {
if (this.checkGroup.length > 0) {
this.checkGroup = []
} else {
this.checkGroup = this.dataList
}
},
checkOne() {
// if (this.checkGroup.length === this.dataList.length) {
// this.allChecked = true
// } else {
// this.allChecked = false
// }
this.allChecked = this.checkGroup.length === this.dataList.length;
},
reduceNum(item) {
if (item.number === 1) {
item.number = 1
} else {
item.number--
}
}
}
})
script>
html>
