526互联

Vue-js循环方式、v-model的使用、事件处理、表单控制、购物车案例

发布时间 2023-09-18 22:40:09作者: Maverick-Lucky

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>

结果：

 当点击减号按钮时：

 当点击加号按钮时：