3-vue-js循环(索引，in，of，forEach，jQuery循环)、v-model的使用、 数组过滤和箭头函数、this指向、事件修饰符、判断字符串在不在另一个字符串中、表单控制、劝和和带加减
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>
4 表单控制 radio 和 checkbox
5 购物车案例
5.1 基本购物车
5.2 带加减和全选
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>Titletitle>
<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>Titletitle>
<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>
<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>Titletitle>
<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>Titletitle>
<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" @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>Titletitle>
<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 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>Titletitle>
<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 和 selfh1>
<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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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>