js循环、v-model、事件处理、表单控制

合集 - vue(11)
1.js循环、v-model、事件处理、表单控制
2.vue 模版语法、指令、nodejs3.Vue之后端交互、计算、监听、组件间通信4.Vue动态组件、插槽、vue项目5.Vue执行和开发流程、登录小案例、混入、插件、elementui6.vue之路由(跳转、多级路由、守卫)、localStorage7.Vue38.路飞学城 之 基础配置9.python 安装pip3、虚拟环境、pip3下载离线包10.路飞学城之多方式登录、短信验证码、课程11.python之redis 缓存
收起

一、js循环方式

1、js循环方式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 1 循环方式一：js 循环---》for()   基于索引的循环
#   let es6 语法，用于定义变量   。定义常量：const
#   var 以后少用
<script>
 
    for (let i = 0; i < 10; i++) {
        console.log(i)
    }
 
    let j = 0
    for (; j < 5 ; ) {
        console.log(j)
        j++
    }
 
# 2 js循环方式二：in 循环   基于迭代的循环，依赖于索引取值   python全是基于迭代的循环
      let good_list = [3,4,5,6]
    for (const item in good_list) {
        console.log(item, good_list[item])
    }
 
# 3 js 循环方式三：of循环     跟python中的in是一样的
     
    let good_list = [2,3,4,5]
    for (const item of good_list) {
        console.log(item)
    }   
 
# 4 数组的方法，循环
  let good_list = [3, 4, 5, 6]
    good_list.forEach(function (value, index) {
        console.log(value, index)
    })
 
# 5 jq的循环(引入jq)
 let good_list = [3, 4, 5, 6]
    let userinfo = {'name': 'lqz', 'age': 19}
    $.each(userinfo, function (index, value) {
        console.log(index)
        console.log(value)
    })
 
</script>

2、vue中使用v-for的时候，在标签上，会看到有 key 属性

- :key="item" 用的属性指令
-key对应的值必须是唯一的

在循环的标签上，加key值的好处是，加速虚拟dom的替换
-区别只在循环的变量变化时，效率高低
-但是一定要注意：key必须唯一

?
1
2
3
4
5
6
7
8
<div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 class="small">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</div>

3、Vue.set的使用

# 以后可能会遇到，数据变了，页面没变的情况
-不能直接更改，借助于vue提供的方法，vue.Set 更改
-以后只要发现数据变了，页面没变，就先用Vue.set试一下

Vue.set(对象, key, value) // 改对象

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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="handlerev">反转</button>
                    <button class="btn btn-danger" @click="handleFirst">变更第一条</button>
                </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>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
 
            good_list: [],
            userinfo: {name: 'lqz', age: 18}
 
        },
        methods: {
            handleShow() {
                this.good_list = [
                    {id: 1, name: '钢笔', price: 9.9, count: 4},
                    {id: 2, name: '足球', price: 99, count: 4},
                    {id: 3, name: '篮球', price: 44, count: 32},
                    {id: 4, name: '电脑', price: 1299, count: 48},
                    {id: 5, name: '鼠标', price: 23, count: 4},
                    {id: 6, name: '脸盆', price: 8, count: 4},
                ]
            },
            handleDelete() {
                this.good_list.pop()
            },
            handlerev() {
                this.good_list.reverse()
                console.log(this.good_list)
            },
            handleFirst() {
                // {this.good_list[0] = {id: 555, name: '小鼠标', price: 223, count: 4}}
                Vue.set(this.good_list, 0, {id: 555, name: '小鼠标', price: 223, count: 4}) // 改数组
                //Vue.set(对象,key,value) // 改对象
            }
        }
 
    })
 
</script>
 
</html>

二、v-model的使用

1、:value="username" 对input标签做绑定，它只能单项的绑定，js变量变，页面会变，页面变，js变量不会变

使用v-model实现双向绑定：页面改变，js变量页跟着改变

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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" v-model="password"></p>
                    <button class="btn btn-danger" @click="handleSubmit">登录</button>
                </div>
            </div>
 
        </div>
 
    </div>
 
</div>
 
</body>
<script>
   let mv = new Vue({
        el: "#app",
        data: {
            //username: 'zjz',
            username: '',
            password: '',
        },
        methods: {
            handleSubmit() {
                console.log(this.username, this.password)
            }
        }
    })
</script>

v-model补充

# v-model 之 lazy、number、trim
lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

三、事件处理

1、基本使用

input 标签的事件

  • input 当输入框进行输入的时候触发的事件  @input="handleInput"
  • change 当元素的值发生改变时触发的事件，光标移走才检测  @change="handleChange"
  • blur 当输入框失去焦点的时候触发的事件  @blur="handleBlur"
  • focus 光标到input框上，触发   @focus="handleFocus"

代码示例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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>
                    <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>
<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>
</html>

2、过滤案例

三个注意事项

1 一定要用 一个变量来接收过滤后的值
2 this指向问题:如果vue的methods中再写函数，this指向就发生变化---->
　　解决方案一： 再外部定义一个变量，内部使用该变量
　　解决方案二： 箭头函数解决--》es6
3  删除输入的字符，回不去了--> 定义一个新变量，接收过滤后的数据集

方案一写法（外部定义变量）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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>
            <div class="text-center">
                <h1>过滤案例</h1>
                <input type="text" v-model="myText" @input="handleInput">
                <hr>
                <p v-for="item in newdataList">{{ item }} </p>
            </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'],
            newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
        },
        methods: {
            handleInput() {
                console.log('输入了')
                console.log('外面的this', this.myText)
                let _this = this
                this.newdataList = this.dataList.filter(function (item) {
                    console.log('里面的this', _this)
                    if (item.indexOf(_this.myText) >= 0) {
                        return true
                    } else {
                        return false
                    }
                })
            }
        }
    })
</script>
</html>

方案二写法（箭头函数）：

补充：过滤细节补充

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//  补充1 ：数组的过滤
   let dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc']
   // 数组的filter方法---》需要传一个匿名函数，匿名函数接收一个参数，它会循环该数组，一次次的调用这个匿名函数，并且传入循环到的值
   // 这个匿名函数返回true，表示这个值保留，返回false，表示这个值不保留
   dataList = dataList.filter(function (item) {
       return true
   })
   console.log(dataList)
 
   // 补充二：现在要判断，用户输入的myText，在不在循环到的数组的某个值中，只要在，就返回true，只要不在就返回false
   // 补充三：如何判断一个字符串是否在另一个字符串中  如果在就大于等于0，不在就是 -1
 
   let name = 'lqz'
   let s = 'ccy lqz zjz  is handsome'
   let res = s.indexOf(name)
   console.log(res)

补充：箭头函数的用法

箭头函数：es6的语法，简化匿名函数的编写，它没有自己的this
- 无参数，无返回值 var f= ()=>{}
- 一个参数，无返回值 var f= item=>{}
- 一个参数，直接有返回值 var f= item=>item+'xxx'
- 多个参数，直接有返回值 var f= (a,b)=>a+b

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script>  
//1 之前写法
    var f = function () {
        console.log('f执行了')
    }
    f()
    //2 变成箭头函数，参数和函数体之间加了箭头
    var f1 = () => {
        console.log('f1执行了')
    }
    f1()
 
    // 3 带参数箭头函数,带一个参数，可以简写
    var f2 = (a) => {
        console.log(a)
    }
    f2('lqz')
 
    var f3 = a => {
        console.log(a)
    }
    f3('lqz')
 
    // 4 有多个参数,不能简写
    var f4 = (a, b) => {
        console.log(a, b)
    }
    f4('lqz', 19)
 
    // 5 有一个返回值
    var f5 = (a, b) => {
        return a + b
    }
    console.log(f5(1, 19))
 
    // 6 可以省略
    var f6 = (a, b) => a + b
    console.log(f6(1, 19))
 
    // 7 一个参数，一个返回值
    var f7 = name => name + '_NB'
    console.log(f7('lqz'))
 
</script>　

3、事件修饰符

?
1
2
3
4
5
# 事件修饰符 释义
.stop   只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self   只处理自己的事件，子控件冒泡的事件不处理
.prevent    阻止a链接的跳转
.once   事件只会触发一次（适用于抽奖页面）

案例代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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>阻止a的跳转</h2>
                <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
 
                <h3>once 只能点击一次</h3>
                <button class="btn btn-success" @click.once="handleSckill">秒杀</button>
 
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClickUl() {
                console.log('UL被点了')
            },
            handleClickLi(i) {
                console.log(i, 'li被点了')
            },
            handleA() {
                console.log('a被点了')
                console.log('有一堆判断，判断通过，跳转')
                alert('您没有权限')
                // location.href = 'http://www.baidu.com'
            },
            handleSckill() {
                console.log('开始描述，正在排队')
                // 发送请求，跟后端交互
                // 这个过程之，不能再点了
                if (Math.floor(Math.random() * 2) > 0) {
                    alert('秒杀成功')
                } else {
                    alert('很遗憾，没秒到')
                }
            }
        }
    })
</script>
</html>

四、表单控制

1、radio 单选框 和 checkbox 复选框

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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="isRem"></p>
                    <span class="btn btn-success" @click="handleLogin">登录</span>
                </form>
                <hr>
                <h1>radio单选-->选中哪个，就显示对应的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="1">
                        女： <input type="radio" v-model="gender" value="2">
                        保密： <input type="radio" v-model="gender" value="0">
 
                    </p>
                    <p>记住密码：<input type="checkbox" v-model="isRem"></p>
                    <span class="btn btn-success" @click="handleLogin">登录</span>
                </form>
                <h1>checkbox多选,使用数组，会把选中的value的值都放到数组中</h1>
                <form>
                    <p>用户名：<input type="text" v-model="username"></p>
                    <p>密码：<input type="password" v-model="password"></p>
                    <p>性别：
                        <br>
                        男： <input type="radio" v-model="gender" value="1">
                        <br>
                        女： <input type="radio" v-model="gender" value="2">
                        <br>
                        保密： <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">
                        橄榄球：<input type="checkbox" value="橄榄球" v-model="hobby">
                    </p>
                    <p>记住密码：<input type="checkbox" v-model="isRem"></p>
                    {{ hobby }}
                    <span class="btn btn-success" @click="handleLogin">登录</span>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var 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>

五、购物车案例

1、代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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="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>{{ item.count }}</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>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {id: 1, name: '金ping梅', 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
                }
            }
        }
    })
</script>
</html>

注：

<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne"></td>

v-model="checkGroup"：它在复选框输入元素与Vue实例（vm）中的checkGroup属性之间建立了双向数据绑定

:value="item"： 是属性指令，item根据循环拿值，并非写死。另外 value在复选框中的作用，如果 value 属性存在，浏览器会将指定的值发送到服务器和默认显示

2、带加减和全选

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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="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>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
 
            good_list: [
                {id: 1, name: '金ping梅', 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 > 0) {
                    item.count--
                } else {
                    alert('不能再少了，受不了了')
                }
            }
        }
    })
</script>
</html>　

六、美女循环

　　

 

posted @   凡人半睁眼  阅读(29)  评论(0)  编辑  收藏  举报
相关博文：
· vue 模版语法、指令、nodejs
· html 之 jQuery库、阻止二次提交
· Vue-js循环方式、v-model的使用、事件处理、表单控制、购物车案例
· Vue之js循环方式、v-model 的使用、事件处理、表单控制、购物车案例、v-model修饰符
· js循环方式、v-model、事件处理、表单控制、购物车案例
阅读排行：
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署
· 葡萄城 AI 搜索升级：DeepSeek 加持，客户体验更智能
历史上的今天：
2019-09-18 nginx负载均衡

阅读目录(Content)

此页目录为空

点击右上角即可分享
微信分享提示