1 js循环方式
1.1 js循环之索引,in,of,forEach,jQuery循环
1.2 key值解释
1.3 Vue.set的使用
2 v-model的使用
2.1 v-model之lazy-number-trim
3 事件处理
3.1 基本使用
3.2 filter和箭头函数、this指向问题、判断字符串在不在另一个字符串中
3.3 事件修饰符stop self prevent once/a>
1 js循环方式
1.1 js循环之索引,in,of,forEach,jQuery循环
<script>
//1 方式一:js 循环---》for() 基于索引的循环
// let是ES6语法,用于定义变量,const用于定义常用
let i = 0
for (; i < 10; ) {
console.log(i)
i++
}
// 循环数组
let good_list = [3,4,5,6,7]
for (let i = 0; i < good_list.length; i++) {
console.log(good_list[i])
}
// 2 方式二:in循环:迭代的循环
let good_list = [3,4,5,6,7]
for (const item in good_list) {
console.log(item) // 取出来的值索引
console.log(good_list[item]) // 取出来的索引对应的值
}
// 3 js循环方式三:of循环,跟python中的in是一样的
let good_list = [3,4,5,6,7]
for (const item of good_list) {
console.log(item) // 取出来的值就是value值
}
// 4 数组的方法:forEach循环:是value写在index前面
let good_list = [3,4,5,6,7]
good_list.forEach(function (value, index) {
console.log(index, value)
})
// 5 jQuery的循环
let good_list = [3,4,5,6,7]
$.each(good_list, function (index, value) {
console.log(index, value)
})
// 循环对象
let userinfo = {name: 'lin', age: 19}
$.each(userinfo, function (key, value) {
console.log(key, value)
})
</script>
1.2 key值解释
# vue中使用v-for的时候,在标签上,会看到有 key 属性
- :key="item" 用的属性指令
-key对应的值必须是唯一的
# 在循环的标签上,加key值的好处是,加速虚拟dom的替换
-区别只在循环的变量变化时,效率高低
-但是一定要注意:value必须唯一
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
};
},
};
</script>
1.3 Vue.set的使用
# 以后可能会遇到,数据变了,页面没变的情况
-不能直接更改,借助于vue提供的方法,vue.Set 更改
-以后只要发现数据变了,页面没变,就先用Vue.set试一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
<button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
<button class="btn btn-danger" @click="handleReverse">反转</button>
<button class="btn btn-danger" @click="handleFirst">变更第一条</button>
<br>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
{{userinfo.name}} -------> {{userinfo.age}}
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
good_list: [],
userinfo: {name: 'lin', age: 20}
},
methods: {
handleShow(){
this.good_list = [
{id: 1, name: '电脑', price: 5, count: 4},
{id: 2, name: '手机', price: 9.9, count: 8},
{id: 3, name: '苹果', price: 21, count: 11},
{id: 4, name: '香蕉', price: 9.9, count: 4},
{id: 5, name: '茶叶', price: 18.6, count: 10},
{id: 6, name: '钢笔', price: 9.9, count: 4},
{id: 7, name: '橡皮', price: 11.9, count: 20},
{id: 8, name: '铅笔', price: 9.1, count: 31},
{id: 9, name: '玫瑰', price: 15, count: 4},
]
},
handleDelete(){
this.good_list.pop()
},
handleReverse(){
this.good_list.reverse()
console.log(this.good_list)
},
handleFirst(){
// this.good_list[0]={id: 99, name: '普洱茶', price: 1500, count: 88}
// 这种更改不会在页面显示,要用Vue.set(对象, key, value)更改
Vue.set(this.good_list, 0, {id: 99, name: '普洱茶', price: 1500, count: 88})
}
}
});
</script>
2 v-model的使用(双向选择)
`v-model` 是 Vue.js 中用于实现表单元素双向数据绑定的指令。
它结合了 `:value` 属性和 `@input` 事件的缩写,使得表单元素的值与
Vue 实例的数据属性之间能够自动保持同步。
具体来说,`v-model` 主要用于表单元素,如输入框、复选框、单选按钮、文本域等。
它的用法取决于不同类型的表单元素,以下是一些常见用法示例:
1. **文本输入框**:
<input v-model="message" placeholder="输入文本">
在这个示例中,`v-model` 将输入框的值与 Vue 实例的 `message` 数据属性双向绑定。
当输入框的值发生变化时,`message` 也会相应地更新。
2. **复选框**:
<input type="checkbox" v-model="isChecked">
这会将复选框的状态与 Vue 实例的 `isChecked` 数据属性双向绑定。
当复选框被选中或取消选中时,`isChecked` 的值会自动更新。
3. **单选按钮**:
<input type="radio" value="option1" v-model="selectedOption">
<input type="radio" value="option2" v-model="selectedOption">
这会将单选按钮的选中状态与 Vue 实例的 `selectedOption` 数据属性双向绑定。
选中不同的单选按钮时,`selectedOption` 的值会相应地更新。
4. **下拉选择框**:
<select v-model="selectedItem">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
这会将下拉选择框的选中项与 Vue 实例的 `selectedItem` 数据属性双向绑定。
选择不同的选项时,`selectedItem` 的值会自动更新。
需要注意的是,`v-model` 只是 `:value` 和 `@input` 的语法糖,它实际上会将 `:value` 绑定到表单元素的值属性,同时监听 `@input` 事件来更新数据。你也可以手动使用 `:value` 和 `@input` 来实现相同的效果,这在一些特殊情况下可能会很有用。例如:
<input :value="message" @input="message = $event">
这与使用 `v-model` 效果相同,将输入框的值与 `message` 数据属性双向绑定。
双向选择案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-model的使用</h1>
<!-- :value="username" 对input标签做绑定,他只能单项的绑定,js变量变,页面会变,页面变,js变量不会变 -->
<!-- <p>用户名:<input type="text" :value="username"></p> -->
<p>用户名:<input type="text" v-model="username"></p>
<p>密码:<input type="password"></p>
<button class="btn btn-success" @click="handlerLogin">登录</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
handlerLogin(){
console.log(this.username, this.password)
}
}
});
</script>
6 v-model之lazy、number、trim
# v-model 之 lazy、number、trim
lazy:等待input框的数据绑定时区焦点之后再变化
number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留
trim:去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-model修饰符</h1>
</div>
<p><input type="text" v-model.lazy="value1">----->{{value1}}</p>
<p><input type="text" v-model.number="value2">----->{{value2}}</p>
<p><input type="text" v-model.trim="value3">----->{{value3}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
value1: '',
value2: '',
value3: '',
}
});
</script>
3 事件处理
3.1 基本使用
# input 标签的事件
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件,光标移走才检测
blur 当输入框失去焦点的时候 触发的事件
focus 光标到input表上上,触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>input的标签事件</h1>
<h2>input事件---》输入事件</h2>
<!-- <input type="text" v-model="value1" v-on:input="handleInput"> ---–>{{value1}}-->
<input type="text" v-model="value1" @input="handleInput"> ----->{{value1}}
<h2>change事件</h2>
<input type="text" v-model="value2" @change="handleChange"> ----->{{value2}}
<h2>blur事件</h2>
<input type="text" v-model="value3" @blur="handleBlur"> ----->{{value3}}
<h2>focus事件</h2>
<input type="text" v-model="value4" @focus="handleFocus"> ----->{{value4}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
value1:'',
value2:'',
value3:'',
value4:'',
},
methods: {
handleInput(){
console.log('我输入了')
},
handleChange(){
console.log('我改变了')
},
handleBlur(){
console.log('我失去焦点了')
},
handleFocus(){
console.log('我获得焦点了')
}
}
});
</script>
3.2 数组过滤和箭头函数、this指向问题、判断字符串在不在另一个字符串中
1 数组过滤 filter
// 补充1:数组的过滤
let dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg']
// 数组的filter方法----》需要传一个匿名函数,匿名函数接收一个参数,
// 它就会循环该数组,一次次的调用这个匿名函数,并且传入循环到的值,
// 如果这个匿名函数返回true,表示这个值保留,返回False,表示这个值不保留
dataList = dataList.filter(function (item) {
return false
})
console.log(dataList)
// 补充2:现在要判断,用户输入的myText,在不在循环到的数组的某个值中,
// 只要在,就返回true,只要不再就返回False
2 判断字符串在不在另一个字符串中
// 补充3:如何判断一个字符串是否在另一个字符串中,如果在就大于等于0,不在就返回-1
let name = 'lin'
let s = 'hello, lin is handsome'
let res = s.indexOf(name)
console.log(res)
3 this指向问题
// 第二个坑: this指向问题:如果vue的methods中再写函数,this指向就发生变化
// 解决方案一:再外部定义一个变量,内部使用该变量
// 解决方案二:箭头函数解决----》ES6特殊语法
4.箭头函数:
-es6的函数定义特殊语法,箭头函数没有自己的this,内部用的是就是外部的
// 箭头函数
// 1.之前写法
var f = function (item) {
console.log('f执行了')
}
f()
// 2.变成箭头函数:参数和函数之间加了箭
let f = () => {
console.log('f执行了')
}
f()
// 3.带参数箭头函数
let f = (a) => {
console.log(a)
}
f('lin')
// 3.1带一个参数可以简写,小括号可以省略, 大括号也可以省略
let f = a => console.log(a)
f('lin')
// 3.2带多个参数,小括号不能省略,大括号也可以省略
let f = (a, b) => console.log(a, b)
f('lin', 19)
// 4.有一个返回值, 且带上关键字 return ,那么大括号不能省略
let f = (a, b) => {
return a+b
}
console.log(f(1, 19))
// 4.1有一个返回值, 且不带上关键字 return ,那么大括号可以省略
let f = (a, b) => a+b
console.log(f(1, 19))
// 4.2一个参数,一个返回值
let f = name => name + '_NB'
console.log(f('lin'))
过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>过滤案例</h1>
<input type="text" v-model="myText" @input="handleInput">
<hr>
<ul>
<!-- <li v-for="item in dataList">{{item}}</li> -->
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
},
methods: {
// 之前写的用
// handleInput(){
// console.log('触发了')
// // 要让:datalist变化------》只要发生变化,页面重新刷新-----》页面看到的就是过滤后的
// console.log('外面的this', this.myText)
// let _this = this
// // 第一个坑:一定要用 一个变量来接收过滤后的值
// // 第二个坑: this指向问题:如果vue的methods中再写函数,this指向就发生变化
// // 解决方案一:再外部定义一个变量,内部使用该变量
// // 解决方案二:箭头函数解决----》ES6
// // 第三个坑:删除了回不去了---->定义一个新变量,接收过滤后的数据集
// this.newDataList = this.dataList.filter(function (item) {
// console.log('里面的this', this) // window中没有myText,就会报错
// // 拿到用户输入的 this.myText
// // 判断this.myText在不在item总
// // 如果在,返回true
// if (item.indexOf(_this.myText) >= 0){
// return true
// } else{
// return false
// }
// })
//
// }
// 箭头函数---》演变
// 演变1:
// handleInput(){
// this.newDataList = this.dataList.filter(item => {
// if (item.indexOf(this.myText) >= 0) {
// return true
// } else {
// return false
// }
// })
// },
// 演变2:
// handleInput(){
// this.newDataList = this.dataList.filter(item => {
// return item.indexOf(this.myText) >= 0
// })
// },
// 演变3:
handleInput(){
this.newDataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0)
},
}
});
</script>
3.3 事件修饰符stop self prevent once
1.事件修饰符 释义
.stop 只处理自己的事件,父控件冒泡的事件不处理(阻止事件冒泡)
.self 只处理自己的事件,子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次(适用于抽奖页面)
2.事件冒泡
事件冒泡(Event Bubbling)是一种事件传播机制,它指的是在处理事件时,事件会从触发事件的
最具体的元素(通常是用户交互的元素,如按钮、文本框等)开始,
然后逐级向上(从子元素到父元素)传播,直到到达文档树的根节点。
如果你在一个嵌套的元素上触发了某个事件,比如点击按钮,不仅会触发按钮上的事件处理函数,
还会依次触发嵌套的父元素上的事件处理函数,直到文档根元素。这使得在父元素上监听事件成为可能,
而不必在每个子元素上都添加相同的事件监听器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>事件修饰符之 stop 和 self</h1>
<h2>子标签的事件,冒泡到了父标签上---->阻止 stop 放在子标签上</h2>
<ul @click="handleClickUl">
<li @click.stop="handleClickLi(1)">第一个</li>
<li @click.stop="handleClickLi(2)">第二个</li>
<li @click="handleClickLi(3)">第三个</li>
</ul>
<h2>子标签的事件,冒泡到了父标签上---->阻止 self 放在父标签上</h2>
<ul @click.self="handleClickUl">
<li @click="handleClickLi(1)">第一个</li>
<li @click="handleClickLi(2)">第二个</li>
<li @click="handleClickLi(3)">第三个</li>
</ul>
</div>
<h2>prevent阻止a的跳转</h2>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看风景</a>
<h2>once 只能点击一次</h2>
<button class="btn btn-success" @click.once="handleSkill">秒杀</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
handleClickUl() {
console.log('ul被点了')
},
handleClickLi(i) {
console.log(i, 'li被点了')
},
handleA() {
console.log('a被点了')
// 假设这里有一些条件判断,判断通过才执行跳转
let a = 9 // 随便定义一个变量来模拟
console.log(a)
if (a >= 10) {
console.log('条件满足,执行跳转');
location.href = 'http://www.baidu.com';
} else {
alert('你没有权限,不能跳转到其他页面')
}
},
handleSkill(){
console.log('开始秒杀,正在排队')
// 发送请求,跟后端交互
// 这个过程中,不能再点了
if (Math.floor(Math.random() * 2) > 0){
alert('秒杀成功')
} else {
alert('很遗憾,没秒到')
}
}
}
});
</script>
4 表单控制 radio 和 checkbox
# 之前只讲了文本类型和密码类型
radio
checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>checkbox单选</h1>
<form>
<p>用户名:<input type="text" v-model="username"></p>
<p>密码:<input type="password" v-model="password"></p>
<p>记住密码:<input type="checkbox" v-model="isRember"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
<hr>
<h1>checkbox单选</h1>
<form>
<p>用户名:<input type="text" v-model="username"></p>
<p>密码:<input type="password" v-model="password"></p>
<p>性别:
男:<input type="radio" v-model="gender" value="男">
女:<input type="radio" v-model="gender" value="女">
保密:<input type="radio" v-model="gender" value="保密">
</p>
<p>爱好:
篮球:<input type="checkbox" v-model="hobby" value="篮球">
足球:<input type="checkbox" v-model="hobby" value="足球">
乒乓球:<input type="checkbox" v-model="hobby" value="乒乓球">
棒球:<input type="checkbox" v-model="hobby" value="棒球">
羽毛球:<input type="checkbox" v-model="hobby" value="羽毛球">
</p>
<p>记住密码:<input type="checkbox" v-model="isRember"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
<hr>
<h1>checkbox多选,使用数组,会把选中的value的值都放到数组中</h1>
<form>
<p>用户名:<input type="text" v-model="username"></p>
<p>密码:<input type="password" v-model="password"></p>
<p>性别:
男:<input type="radio" v-model="gender" value="男">
女:<input type="radio" v-model="gender" value="女">
保密:<input type="radio" v-model="gender" value="保密">
</p>
<p>记住密码:<input type="checkbox" v-model="isRember"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
isRember: false,
gender: '',
hobby: []
},
methods:{
handleLogin(){
console.log(this.username, this.password, this.gender, this.isRember, this.hobby)
}
}
});
</script>
5 购物车案例
5.1 基本购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>购物车案例</h1>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选:<input type="checkbox" v-model="checkAll" @change="handleChangeAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品有:{{checkGroup}}
<br>
总价格是:{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '中华', price: 99, count: 2},
{id: 2, name: '玉溪', price: 56, count: 4},
{id: 3, name: '红塔山', price: 66, count: 3},
{id: 4, name: '大重九', price: 88, count: 2}
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice(){
// 选中了哪些商品,计算价格
total = 0
for (item of this.checkGroup) {
total += item.price * item.count
}
return total
},
handleChangeAll(){
if (this.checkAll) {
this.checkGroup = this.good_list
} else {
this.checkGroup = []
}
},
handleOne(){
if (this.checkGroup.length === this.good_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
}
}
});
</script>
5.2 带加减和全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>购物车案例</h1>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选:<input type="checkbox" v-model="checkAll" @change="handleChangeAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><span class="btn" @click="item.count++">+</span> {{item.count}} <span class="btn" @click="handleJian(item)">-</span></td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品有:{{checkGroup}}
<br>
总价格是:{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '中华', price: 99, count: 2},
{id: 2, name: '玉溪', price: 56, count: 4},
{id: 3, name: '红塔山', price: 66, count: 3},
{id: 4, name: '大重九', price: 88, count: 2}
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice(){
// 选中了哪些商品,计算价格
total = 0
for (item of this.checkGroup) {
total += item.price * item.count
}
return total
},
handleChangeAll(){
if (this.checkAll) {
this.checkGroup = this.good_list
} else {
this.checkGroup = []
}
},
handleOne(){
if (this.checkGroup.length === this.good_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
handleJian(item){
if (item.count > 1) {
item.count--
} else {
alert('数量不能小于1')
}
}
}
});
</script>