js循环方式
在es6语法中：（以后尽量少用var有很多坑）
- let：定义变量
- const：定义常量
1. 方式一：for循环，基于索引的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{},
})
// js的循环方式一,for循环，基于索引的循环
// i是索引，还可以这样写：for(let i=0;i<5; i++){}
let i=0
for (;i<5;){
console.log(i)
i++
}
// j是索引
let good_list=[1,2,3,4,5]
for (let j=0; j<good_list.length;j++){
console.log(j,good_list[j])
}
</script>
</html>
结果：
2. 方式二：in 循环，基于迭代的循环，依赖于索引取值，python全是基于迭代的循环。取出的值是索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{},
})
// 方式二：in 循环，依赖于索引取值，取出来的是索引
let good_list=[3,4,5,6]
for (const index in good_list){
//index是索引值
console.log(index)
// 取出的是索引对应的值
console.log(good_list[index])
}
</script>
</html>
结果：
3. 方式三：of 循环 跟python中的in一样，取出来的是具体的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{},
})
// 方式三：of 循环 和python中的in是一样的
// 取出的是索引对应的值
let good_list=[2,3,4,5]
for(const item of good_list){
console.log(item)
}
</script>
</html>
结果：
4. 数组的方法，循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{},
})
// 数组的循环
let good_list=[2,3,4,5]
good_list.forEach(function (value,index) {
//数组中具体的值
console.log(value)
//索引值
console.log(index)
})
</script>
</html>
结果：
一共会有两个值：具体的值，索引值
5. jq的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{},
})
// jq的循环
user={name:'hh',age:'18','height':178}
$.each(user,function (index,value) {
// index:对应的是key值
console.log(index)
// value对应的是value值
console.log(value)
})
</script>
</html>
结果：
6. key 值解释
vue中使用v-for的时候，在标签上，会看到有key属性
- :key=“item” 用的属性指令
- key对应的值必须是唯一的
在循环的标签上，加key值的好处是，加速虚拟dom的替换
- 区别只在循环的变量变化时，效率高低
- 但是一定要注意：value必须唯一
vue.set的使用
以后可能会遇到，数据变了，但是页面没变的情况
- 不能直接更改，借助于vue提供的方法：vue.set 更改
- 以后只要发现数据变了，页面没变，就先用vue.set试一下
现象1：
在Console台操作数据，数据修改成功，但是页面没有发生变化
现象2：
在后端进行数据修改，但是前端页面没有改变
前端页面：
index.html：
结果：
反转：
修改第一条：使用vue.set：
Vue.set(对象,key,value) // 改对象
Vue.set(数组，索引，修改的单条值）// 改数组
前端页面：
v-model的使用
v-model：数据的双向绑定
:value="username" 对input标签做绑定，它只能单项的绑定，js变量变，页面会变，页面变，js变量不会变
后端：
js变量变，页面就会变：
页面变，js变量不会变：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<button class="btn btn-success" @click="handleSubmit">登录</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
username:'hh',
password:''
},
methods:{
handleSubmit(){
console.log(this.username)
}
}
})
</script>
</html>
结果：
页面变，js变量也会变：
js变量变了，页面也会变：
v-model的其他使用
v-model 之 lazy、number、trim
- lazy：等待input框的数据绑定时区焦点之后再变化
- number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
- trim：去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>lazy:等待input输入框失去焦点时在发生变化</h5>
<p><input type="text" v-model.lazy="value1">----->{{value1}}</p>
<h5>number: 数字开头，只保留数字部分，后面的字母不保留；字母开头，都保留</h5>
<p><input type="text" v-model.number="value2">----->{{value2}}</p>
<p><input type="text" v-model.number="value3">----->{{value3}}</p>
<h5>trim:去除首部的空格</h5>
<p><input type="text" v-model.trim="value4">----->{{value4}}</p>
</div>
</div>
</div>
</div>
</body>
<script>
let vm=new Vue({
el:'#app',
data:{
value1:'',
value2:'',
value3:'',
value4:''
}
})
</script>
</html>
结果：
事件处理
基本使用
input 当输入框进行输入的时候 触发的事件：
- Input事件：当输入框进行输入时，触发的事件
- change事件：当元素值发生变化时，触发的事件，光标移走才会检测
- blur事件：当输入框失去焦点时，触发的事件
- focus事件：当光标点到input标签上时，触发的事件
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>input事件：当输入框进行输入的时候，触发的事件</h5>
<p><input type="text" v-model="value1" @input="handleInput">----->{{value1}}</p>
<h5>change事件：当元素值发生改变时，触发的事件，光标移走才会检测</h5>
<p><input type="text" v-model="value2" @change="handleChange">----->{{value2}}</p>
<h5>blur事件：当输入框失去焦点时，触发的事件</h5>
<p><input type="text"v-model="value3" @blur="handleBlur">----->{{value3}}</p>
<h5>focus事件：当光标移动到input标签上时，触发的事件</h5>
<p><input type="text" v-model="value4" @focus="handleFocus">----->{{value4}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm=new Vue({
el:'#app',
data:{
value1:'',
value2:'',
value3:'',
value4:''
},
methods:{
handleInput(){
console.log('input事件')
},
handleChange(){
console.log('change事件')
},
handleBlur(){
console.log('blur事件')
},
handleFocus(){
console.log('focus事件')
}
}
})
</script>
</html>
结果：
- Input事件：
- change事件：
- blur事件：
- focus事件：
过滤案例
过滤案例的注意点（坑点）：
1.要让列表发生变化 -----》只要datalist发生变化，页面就要刷线 -----》页面看到的是过滤后的datalist
2. this的指向问题：如果是vue中的methods中再写函数，this的指向就发生了变化
3. 删除，回不去了---》定义一个新变量，接收过滤后的数据集
- 解决方法1：在外部定义定义一个新的变量来接受过滤后的值，内部使用该变量
- 解决方法2：使用箭头函数（es6语法）
方法1：在外部定义一个新的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>数组过滤案例</h5>
<input type="text" v-model="myText" @click="handleInput">
<hr>
<p v-for="item in newlist">{{item}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm=new Vue({
el:'#app',
data:{
myText:'',
datalist: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
newlist:['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
},
methods:{
handleInput(){
console.log('开始输入了')
console.log('',this.myText)
// 定义一个新的变量，方便在函数内使用
// this 是外面的this
let _this = this
// 用newlist来接受过滤后的值
this.newlist=this.datalist.filter(function (item) {
// 拿到用户的this.myText，判断在不在item中
// 在就返回true，不在就返回false
console.log('里面的this', _this) // window中没有myText，就会报错
if(item.indexOf(_this.myText) >=0){
return true
}else{
return false
}
})
}
}
})
</script>
</html>
结果：
没开始输入时：
当输入b时：
方法2：箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>数组过滤案例</h5>
<input type="text" v-model="myText" @click="handleInput">
<hr>
<p v-for="item in newlist">{{item}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm=new Vue({
el:'#app',
data:{
myText:'',
datalist: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
newlist:['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
},
methods:{
handleInput(){
// 使用箭头函数
this.newlist=this.datalist.filter(item =>item.indexOf(this.myText) >= 0)
}
}
})
</script>
</html>
结果：
补充：
判断一个字符串是否在另一个字符串中 如果在就大于等于0，不在就是 -1
结果：
在另一个字符串中：
不在另一个字符串中：
过滤数组
结果：
当输入c时:
当输入h时：返回一个空数组，因为不在datalist数组中
事件修饰符
.stop事件修饰符：只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）.self事件修饰符：只处理自己的事件，子控件冒泡的事件不处理
.prevent事件修饰符：阻止a链接的跳转
.once事件修饰符：事件只会触发一次（适用于抽奖页面）
-1. stop、self：
事件冒泡的现象:通self或者stop解决事件冒泡
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h4>时间修饰符之stop、self</h4>
<h5>子标签的事件，冒泡到了父标签上---》阻止冒泡事件，stop放在子标签上</h5>
<ul @click="handleUrl">
<li @click.stop="handleClickLi(1)">第一个</li>
<li @click.stop="handleClickLi(2)">第二个</li>
<li @click.stop="handleClickLi(3)">第三个</li>
</ul>
<h5>子标签的事件，冒泡到了父标签上---》阻止冒泡事件，self放在父标签上</h5>
<ul @click.self="handleUrl">
<li @click="handleClickLi(1)">第一个</li>
<li @click="handleClickLi(2)">第二个</li>
<li @click="handleClickLi(3)">第三个</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {},
methods: {
handleUrl() {
console.log('url被点击了')
},
handleClickLi(i) {
console.log(i, 'li被点击了')
}
}
})
</script>
</html>
结果：
- prevent事件修饰符
跳转页面： location.href='https://www.baidu.com'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>阻止a标签跳转</h5>
<a href="https://www.baidu.com" @click.prevent="handleA">点我看帅哥</a>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {},
methods: {
// 阻止a链接跳转
handleA(){
console.log('a标签被点了')
console.log('有一堆判断，')
alert('没有权限')
// 跳转页面
// location.href='https://www.baidu.com'
}
})
</script>
</html
结果：
当不加prevent时，点击a链接就会跳转
- once事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>只能点击一次</h5>
<button class="btn btn-success" @click.once="handleSckill">秒杀</button>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {},
methods: {
// 只能点击一次
handleSckill(){
console.log('开始描述，正在排队')
// 发送请求，跟后端交互
// 这个过程之，不能再点了
if (Math.floor(Math.random() * 2) > 0) {
alert('秒杀成功')
} else {
alert('很遗憾，没秒到')
}
}
}
})
</script>
</html>
结果：
在点击的时候，是没有触发的。必须得刷新页面，才能再次点击。
表单控制
- radio
- checkbox
checkbox单选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>checkbox单选</h5>
<form >
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>记住密码：<input type="checkbox" v-model="isRem"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
// checkbox 单选，要么是true，要么是false
isRem: '',
},
methods: {
handleLogin() {
console.log(this.username, this.password, this.isRem)
}
}
})
</script>
</html>
结果：
选中：
未选中：
radio单选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>radio单选：选中哪个就显示对应的value的值</h5>
<form action="">
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>性别：
男：<input type="radio" value="1" v-model="gender">
女：<input type="radio" value="2" v-model="gender">
保密：<input type="radio" value="0" v-model="gender">
</p>
<p>记住密码：<input type="checkbox" v-model="isRem"></p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
// checkbox 单选，要么是true，要么是false
isRem: '',
gender:'',
hobby:[]
},
methods: {
handleLogin() {
console.log(this.username, this.password, this.isRem,this.gender)
}
}
})
</script>
</html>
结果：
checkbox多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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">
<h5>checkbox多选，使用数组，会把全选中的value的值放到数组中</h5>
<form action="">
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>性别：
<input type="radio" v-model="gender" value="1">
<input type="radio" v-model="gender" value="2">
<input type="radio" v-model="gender" value="0">
</p>
<p>爱好：
篮球：<input type="checkbox" value="篮球" v-model="hobby">
足球：<input type="checkbox" value="足球" v-model="hobby">
乒乓球：<input type="checkbox" value="乒乓球" v-model="hobby">
</p>
<p>记住密码：<input type="checkbox" v-model="isRem">{{hobby}}</p>
<span class="btn btn-success" @click="handleLogin">登录</span>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
// checkbox 单选，要么是true，要么是false
isRem: '',
gender:'',
hobby:[]
},
methods: {
handleLogin() {
console.log(this.username, this.password, this.isRem,this.gender,this.hobby)
}
}
})
</script>
</html>
结果：
购物车案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<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">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></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>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '红楼梦', price: 99, count: 2},
{id: 2, name: '西柚记', price: 59, count: 1},
{id: 3, name: '水壶转', price: 89, count: 5},
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice() {
// 选中了哪些商品，计算价格
total = 0
for (item of this.checkGroup) {
// console.log(item)
total += item.price * item.count
}
return total
},
//是否全选
handleCheckAll() {
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('已经是最少了，不能在减了')
}
}
}
})
</script>
</html>
结果：
当全部选中商品时：上面的全选也会自动勾上
当没有全部选中时：上面的全选不会勾上
带数量加减的购物车：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<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">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></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>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '红楼梦', price: 99, count: 2},
{id: 2, name: '西柚记', price: 59, count: 1},
{id: 3, name: '水壶转', price: 89, count: 5},
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice() {
// 选中了哪些商品，计算价格
total = 0
for (item of this.checkGroup) {
// console.log(item)
total += item.price * item.count
}
return total
},
//是否全选
handleCheckAll() {
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('已经是最少了，不能在减了')
}
}
}
})
</script>
</html>
结果：
当点击减号按钮时：
当点击加号按钮时：
标签：事件处理,Vue,console,log,Title,js,item,事件 From： https://www.cnblogs.com/Lucky-Hua/p/17713327.html