Vue(4)
1 按键修饰符
1. @keyup="函数名"
# 在键盘按的按键可以展示出来
2. @keyup.enter="函数名"
# 按下回车键时会触发相关操作
3. <button @click="handelClick">点我</button>
methods: {
handelClick(ev) {
// 可以看见上述3中的调用函数时并没有传参数，这里却可以接收到参数
console.log(ev)
}
}
<div id="app">
<input type="text" v-model="name" @keyup="handelKey1">
<input type="text" v-model="name" @keyup.enter="handelKey2">
<!-- <button @click="handelClick">点我</button>-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
handelKey1(ev) {
console.log(ev)
if (ev.keyCode == 13) {
console.log('按下了回车')
}
},
handelKey2() {
console.log('回车键按下了')
},
handelClick(ev) {
console.log(ev)
}
}
})
</script>2 表单控制
-
checkbox
-
radio
<div>
<input type="checkbox" v-model="checks" value="1">篮球
<input type="checkbox" v-model="checks" value="2">足球
<input type="checkbox" v-model="checks" value="3">网球
<p>当前选择为：{{checks}}</p>
</div>
<div>
<h1>radio按钮</h1>
<p>选择性别</p>
<p><input type="radio" v-model="gender" value="1">男</p>
<p><input type="radio" v-model="gender" value="2">女</p>
<p><input type="radio" v-model="gender" value="3">保密</p>
<p>当前选择为：{{gender}}</p>
</div>
<script>
let vu = new Vue({
el: '#app',
data: {
// checks:'',
checks:[],
gender: '' // 单选框这里使用数组结果也是一样的
},
methods: {},
})
</script>
# 比较有意思的是，当checks 为字符串时，显示的结果为布尔值；选择方式会随着值的类型的变化而变化。
3 购物车案例
-
3.1 简易版本
<style>
tr,th,td{
border:1px red solid ;
}
</style>
<body>
<div id="app">
<h1>购物车版本一</h1>
<div>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>加入购物车</th>
</tr>
<tr v-for="good in shopping">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.number}}</td>
<!-- 再绑定一个事件，实时展示商品总价-->
<!-- <td><input type="checkbox" v-model="checks" :value="good" @change="shopChange(good)"></td>-->
<td><input type="checkbox" v-model="checks" :value="good" ></td>
</tr>
<tr>
<td>商品总价:</td>
<td>{{getprice()}}</td>
</tr>
</table>
</div>
</div>
</body>
<script>
let vu = new Vue({
el: '#app',
data: {
shopping: [{name: '三体', price: 10, number: 2},
{name: '诗经', price: 10, number: 2},
{name: '氓', price: 10, number: 2},],
// total_price:0,
checks:[],
},
methods: {
// shopChange(obj){
//
// // console.log(obj)
// this.total_price +=obj.price*obj.number
// }
getprice(){
let total_price = 0;
if(this.checks.length >=1){
for(i in this.checks){
total_price += this.checks[i].price * this.checks[i].number
}
}
// return this.total_price
return total_price
}
},
})
</script>
-
3.2 增加全选功能
<style>
tr,th,td{
border:1px red solid ;
}
</style>
<body>
<div id="app">
<h1>购物车版本一</h1>
<div>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>加入购物车/全选<input type="checkbox" v-model="checkall" @change="handlerCheckAll"></th>
</tr>
<tr v-for="good in shopping">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.number}}</td>
<!-- 再绑定一个事件，实时展示商品总价-->
<!-- <td><input type="checkbox" v-model="checks" :value="good" @change="shopChange(good)"></td>-->
<td><input type="checkbox" v-model="check" :value="good" @change="handlerCheckOne"></td>
</tr>
<tr>
<td>商品总价:</td>
<td>{{getprice()}}</td>
</tr>
</table>
</div>
</div>
</body>
<script>
let vu = new Vue({
el: '#app',
data: {
shopping: [{name: '三体', price: 10, number: 2},
{name: '诗经', price: 10, number: 2},
{name: '氓', price: 10, number: 2},],
// total_price:0,
check:[],
checkall:false,
},
methods: {
getprice(){
let total_price = 0;
if(this.check.length >=1){
for(i in this.check){