zoukankan      html  css  js  c++  java

  • Vue基础

    一 模板语法

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>

    <div id="box">
        <ul>
            <li>字符串：{{name}}</li>
            <li>数值：{{age}}</li>
            <li>数组：{{list1}}</li>
            <li>对象：{{obj1}}</li>
            <li>字符串：{{link1}}</li>
            <li>运算：{{10+20+30+40}}</li>
            <li>三目运算符：{{10>20?'是':'否'}}</li>
        </ul>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box', // 在box这个div中可以写 vue的语法
            data: {
                name: 'Darker', // 字符串
                age: 18, // 数值
                list1: [1,2,3,4],   // 数组
                obj1: {name: 'Darker', age: 19}, // 对象
                link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
            }
        })
    </script>
    </html>

    img

    二 指令

    1.文本指令

    指令释义
    v-html 让HTML渲染成页面
    v-text 标签内容显示js变量对应的值
    v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示
    v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示

    v-show与 v-if的区别：

    v-show：标签还在，只是不显示了（display: none）
    v-if：直接操作DOM，删除/插入 标签

    v-html：让HTML渲染成页面

    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>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-html</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>

    <div id="box">
        <ul>
            <li v-html="link1"></li>
        </ul>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box', // 在box这个div中可以写 vue的语法
            data: {
                link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
            }
        })
    </script>
    </html>

    、

    img

    v-text：标签内容显示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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-text</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>

    <div id="box">
        <ul>
            <li v-text="link1"></li>
        </ul>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box', // 在box这个div中可以写 vue的语法
            data: {
                link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            }
        })
    </script>
    </html>

    img

    v-show：显示/隐藏内容

    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>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-show</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>

    <div id="box">
        <h3>案例：控件通过按钮来控制显示和小事</h3>
        <button @click="handleClick()">点我</button>
        <br>
        <div v-show="isShow">isShow</div>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                isShow: true,
            },
            methods: {
                handleClick(){
                  this.isShow = !this.isShow    // this指的是当前的vue对象
                },
            }
        })
    </script>
    </html>

    img

    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
    28
    29
    30
    31
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>

    <div id="box">
        <h3>案例：控件通过按钮来控制显示和消失</h3>
        <button @click="handleClick()">点我</button>
        <br>
        <div v-if="isCreated">isCreated</div>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                isCreated:true
            },
            methods: {
                handleClick(){
                  this.isCreated = !this.isCreated    // this指的是当前的vue对象
                },
            }
        })
    </script>
    </html>

    img

    2.事件指令

    指令释义
    v-on 触发事件（不推荐）
    @ 触发事件（推荐）
    @[event] 触发event事件（可以是其他任意事件）

    v-on:click 可以缩写成@click

    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>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件指令</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>

    <div id="box">
        <button v-on:click="handleClick1">点我1</button>
        <!-- 下面这个用的多 -->
        <button @click="handleClick2">点我2</button>
        <!-- 如果不传参数，是没有区别的 -->
        <button @click="handleClick3()">点我3-1(带括号)</button>
        <!-- 如果要传参数 -->
        <button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)</button>
        <!-- 传入事件 -->
        <button @click="handleClick4($event)">点我4(带事件参数)</button>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {

            },
            methods: {
                handleClick1() {
                    console.log('点我1')
                },
                handleClick2() {
                    console.log('点我2')
                },
                handleClick3(a,b,c) {
                    console.log(a,b,c)
                },
                handleClick4(event) {
                    console.log(event)
                },
            }
        })
    </script>
    </html>

    img

    3.属性指令

    指令释义
    v-bind 直接写js的变量或语法（不推荐）
    : 直接写js的变量或语法（推荐）

    v-bind:class=’js变量’可以缩写成：:class=’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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性指令</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            .red {
                color: rgba(255, 104, 104, 0.7);
            }
            .purple {
                color: rgba(104, 104, 255, 0.7);
            }
        </style>
    </head>
    <body>

    <div id="box">
        <img v-bind:src="url" alt="" height="100">
        <br>
        <button @click="handleClick">点我变色</button>
        <div :class="isActive?'red':'purple'">
            <h1>我是一个div</h1>
        </div>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg',
                change: 'red',
                isActive: true
            },
            methods: {
                handleClick() {
                    this.isActive = !this.isActive
                },
            }
        })
    </script>
    </html>

    img

    三 Style 和 Class

    数据的绑定

    语法

    :属性名=js变量/js语法

    • :class=’js变量、字符串、js数组’

    class：三目运算符、数组、对象{red: true}

    • :style=’js变量、字符串、js数组’

    style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Style 和 Class</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            .red {
                color: rgba(255, 104, 104, 0.7);
            }
            .font-20 {
                font-size: 20px;
            }
            .be-bold {
                font-weight: bold;
            }
        </style>
    </head>
    <body>

    <div id="box">
        <p>我是一个普通的p标签</p>
        <div :class="class_obj">
            <p>我是一个不普通的p标签1</p>
        </div>

        <button @click="handleClick">点击放大字体</button>
        <div :style="style_obj">
            <p>我是一个不普通的p标签2</p>
        </div>
    </div>

    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                // class_obj: 'red',    // 放1个是字符串
                class_obj: ['red', 'font-20', 'be-bold'],    // 放2个是数组
                // class_obj: { red:true, be-bold:false},    // 也可以放对象
                // 数组.push()   从尾部添加1个元素
                // 数组.pop()    删除最后1个元素 并返回

                // 对象的写法
                style_obj: {
                    color: 'red',
                    fontSize: '20px'
                }
                // style_obj: [{background:'red'}, {fontSize:'20px'}]

            },
            methods: {
                handleClick(){
                    this.style_obj['fontSize']='30px'
                }
            }

        })
    </script>
    </html>
    下方试验的命令
    1
    2
    3
    4
    5
    6
    		 
    vm.class_obj.pop()
    vm.class_obj.pop()
    vm.class_obj.pop()
    vm.class_obj.push('be-bold')
    vm.class_obj.push('red')
    vm.class_obj.push('font-20')

    img

    四 条件渲染

    指令释义
    v-if 相当于： if
    v-else 相当于：else
    v-else-if 相当于：else 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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>if、else if、else</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <h3>案例：if、else if、else</h3>
        <h2 v-if="type==='1'">A</h2>
        <h2 v-else-if="type==='2'">B</h2>
        <h2 v-else>C</h2>
    </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                type: '1',
            }
        })
    </script>
    </html>

    img

    五 列表渲染

    1. v-if+v-for+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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if + v-for + v-else控制购物车商品的显示</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <h2>我的购物车</h2>
        <button @click="show">刷新购物车</button>
        <br><br>
        <table v-if="!shopping_car.length==0">
            <tr>
                <td>商品名称</td>
                <td>价格</td>
            </tr>
            <tr v-for="item in shopping_car">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <table v-else>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
            </tr>
            <tr>
                <td>暂无信息</td>
                <td>暂无信息</td>
            </tr>
        </table>
    </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                isActive: false,
                shopping_car: []
            },
            methods: {
                show() {
                    this.shopping_car = [
                        {name: 'Threadripper 3990X', price: '29999元'},
                        {name: 'NVIDIA RTX 8000', price: '59999元'},
                        {name: 'ROG ZENITH II EXTREME', price: '9999元'},
                    ]
                }
            }
        })
    </script>
    </html>

    img

    2. 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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for遍历数组(列表)、对象(字典)</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>

    <div id="box">
        <h2>数组（列表）for循环遍历</h2>
        <ul>
            <li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
        </ul>

        <h2>对象（字典）for循环遍历</h2>
        <ul>
            <li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
        </ul>

        <h2>数组（列表）套对象（字典）for循环遍历</h2>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>国籍</td>
            </tr>
            <tr v-for="info in summary_test">
                <td>{{info.name}}</td>
                <td>{{info.age}}</td>
                <td>{{info.gender}}</td>
                <td>{{info.country}}</td>
            </tr>
        </table>
    </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
                dic_test:{name: 'Darker', age: 18, gender: 'male'},
                summary_test: [
                        {name: 'Alan', age: 23, gender: 'male', country: 'America'},
                        {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
                        {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
                        {name: 'Darker', age: 18, gender: 'male', country: 'China'},
                        {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
                    ]
            }
        })
    </script>
    </html>

    img

    注意！在Vue中：

    • 数组的index和value是反的
    • 对象的key和value也是反的

    3. key值 的解释

    vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

    • 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
    • 页面更新之后，会加速DOM的替换（渲染）
    • :key="变量"

    4. 数组更新与检测

    可以检测到变动的数组操作：

    push：最后位置添加
    pop：最后位置删除
    shift：第一个位置删除
    unshift：第一个位置添加
    splice：切片
    sort：排序
    reverse：反转

    检测不到变动的数组操作：

    filter()：过滤
    concat()：追加另一个数组
    slice()：
    map()：

    原因：

    作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

    解决方法：
    1
    2
    3
    4
    5
    6
    7
    8
    		 
    // 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
    vm.arrayList[0]
    "Alan"
    vm.arrayList[0]='Darker'
    "Darker"

    // 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
    Vue.set(vm.arrayList, 0, 'Darker')

    六 事件处理

    事件释义
    input 当输入框进行输入的时候 触发的事件
    change 当元素的值发生改变时 触发的事件
    blur 当输入框失去焦点的时候 触发的事件

    change 和 blur 最本质的区别：

    如果输入框为空，失去焦点后，change不会触发，但是blur会触发

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤案例</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容："></p>
    <!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容："></p> -->
    <!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容："></p> -->
        <ul>
            <li v-for="data in newList">{{data}}</li>
        </ul>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText: '',
                dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
                newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            },
            methods: {
                handleInput() {
                    this.newList = this.dataList.filter(item => {
                        // item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引
                        return item.indexOf(this.myText) > -1   // 返回索引大于1的元素：>-1 就表示包含在其中
                    })
                },
            },
        })
    </script>
    </html>

    img

    2.事件修饰符

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

    使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

    用 v-on:click.prevent.self 会阻止所有的点击
    而 v-on:click.self.prevent 只会阻止对元素自身的点击

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
    <!--    <ul @click="handleUl">-->
        <ul @click.self="handleUl">
    <!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
            <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
            <li><a href="http://www.baidu.com">不拦截</a></li>
            <li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li>
            <li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li>
            <li><button @click.once="test">只执行一次</button></li>
        </ul>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: ['1','22','333','4444']
            },
            methods: {
                handleUl(ev){
                    console.log('ul被点击了')
                },
                handleLi(){
                    console.log('li被点击了')
                    ev.stopPropagation()    // 点击事件停止 冒泡（向父组件传递时间）
                },
                handleLink(ev){
                    ev.preventDefault()
                },
                test(){
                    alert('只触发1次')
                }
            }
        })
    </script>
    </html>

    事件冒泡

    事件冒泡

    阻止事件冒泡

    阻止事件冒泡

    阻止链接跳转+只执行1次

    阻止链接跳转+只执行1次

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按键修饰符</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <!--    <input type="text" v-model="myInput" @keyup="handleKey">-->
        <!--    <input type="text" v-model="myInput" @keyup.13="handleKey">-->
        <input type="text" @keyup="handleKey1">
        <input type="text" @keyup.enter="handleKey2">
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: ['1', '22', '333', '4444']
            },
            methods: {
                handleKey1(ev) {
                    console.log('按下了' + ev)
                    // if (ev.keyCode==13){
                    //     console.log('回车键被按下了')
                    // }
                },
                handleKey2(ev) {
                    console.log('按下了回车键')
                }
            }
        })
    </script>
    </html>

    img

    七 数据双向绑定

    v-model的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="text" v-model="myText" placeholder="请输入内容">
        您输入的内容是：{{myText}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText: '',
            },
        })
    </script>
    </html>

    img

    八 表单控制

    1.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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>checkbox</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="text" placeholder="请输入用户名："><br>
        <input type="password" placeholder="请输入密码："><br>
        <input type="checkbox" v-model="radio">记住用户名
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText: '',
                textBig: '',
                radio: false,
            },
        })
    </script>
    </html>

    img

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单选</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="radio" v-model="radio" value="男">男
        <input type="radio" v-model="radio" value="女">女
        <input type="radio" v-model="radio" value="保密">保密
        <br><br>您选择的性别：{{radio}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                radio: '',
            },

        })
    </script>
    </html>

    img

    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>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多选</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">

        <input type="checkbox" v-model="many" value="篮球">篮球
        <input type="checkbox" v-model="many" value="足球">足球
        <input type="checkbox" v-model="many" value="棒球">棒球
        <input type="checkbox" v-model="many" value="桌球">桌球
        <br><br>您喜欢的球类：{{many}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                many: [],
            },
        })
    </script>
    </html>

    img

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>购物车结算</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <table>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>选择</td>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.number}}</td>
                <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
            </tr>
        </table>
        <br>已选商品：{{checkGroup}}
        <br>总价：{{getPrice()}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: [
                    {name: '今瓶没', price: 99, number: 2},
                    {name: '西柚记', price: 59, number: 1},
                    {name: '水壶转', price: 89, number: 5},
                ],
                checkGroup: [],
            },
            methods: {
                getPrice() {
                    let sum_price = 0
                    for (i in this.checkGroup) {    // 这里的 i 是索引
                        sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                    }
                    return sum_price
                }
            }
        })
    </script>
    </html>

    img

    5.购物车案例 - 全选/全不选

    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
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选/全不选</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <table>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></td>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.number}}</td>
                <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
            </tr>
        </table>
        <br>已选商品：{{checkGroup}}
        <br>总价：{{getPrice()}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: [
                    {name: '今瓶没', price: 99, number: 2},
                    {name: '西柚记', price: 59, number: 1},
                    {name: '水壶转', price: 89, number: 5},
                ],
                checkGroup: [],
                allChecked: false,
            },
            methods: {
                getPrice() {
                    let sum_price = 0
                    for (i inthis.checkGroup) {    // 这里的 i 是索引
                        sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                    }
    return sum_price
                },
                checkAll() {
    if (this.checkGroup.length > 0) {
    this.checkGroup = []
                    } else {
    this.checkGroup = this.dataList
                    }
                },
                checkOne() {
    // if (this.checkGroup.length === this.dataList.length) {
    //     this.allChecked = true
    // } else {
    //     this.allChecked = false
    // }
    this.allChecked = this.checkGroup.length === this.dataList.length;
                }
            }
        })
    </script>
    </html>

    img

    6.购物车案例 - 数量加减

    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>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="row">
        <div id="box" class="col-md-4 offset-md-1 text-center mt-5 ">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th scope="col">商品名称</th>
                    <th scope="col">单价</th>
                    <th scope="col">数量</th>
                    <th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in dataList">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="btn link btn-sm" @click="reduceNum(item)">-</button>
                        {{item.number}}
                        <button class="btn link btn-sm" @click="item.number++">+</button>
                    </td>
                    <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
                </tr>
                <tr class="text-left">
    <tdcolspan="4">总价：{{getPrice()}}
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </body>
    <script>
    var vm = new Vue({
    el: '#box',
    data: {
    dataList: [
                    {name: '今瓶没', price: 99, number: 1},
                    {name: '西柚记', price: 59, number: 1},
                    {name: '水壶转', price: 89, number: 1},
                ],
    checkGroup: [],
    allChecked: false,
            },
    methods: {
                getPrice() {
    let sum_price = 0
    for (i inthis.checkGroup) {
                        sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                    }
    return sum_price
                },
                checkAll() {
    if (this.checkGroup.length > 0) {
    this.checkGroup = []
                    } else {
    this.checkGroup = this.dataList
                    }
                },
                checkOne() {
    // if (this.checkGroup.length === this.dataList.length) {
    //     this.allChecked = true
    // } else {
    //     this.allChecked = false
    // }
    this.allChecked = this.checkGroup.length === this.dataList.length;
                },
                reduceNum(item) {
                    if (item.number === 1) {
                        item.number = 1
                    } else {
                        item.number--
                    }
                }
            }
        })
    </script>
    </html>

    img

    九 v-model进阶

    v-model 之 lazy、number、trim

    lazy：等待input框的数据绑定时区焦点之后再变化
    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
    26
    27
    28
    29
    30
    		 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model 之 lazy、number、trim</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
        <br>
        <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
        <br>
        <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
        <br>
        <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText1: '',
                myText2: '',
                myText3: '',
                myText4: '',
            },
        })
    </script>
    </html>

     

  • 相关阅读:
    路由器竟装有隐藏摄像头！游客青岛民宿上演教科书式反偷拍
    21天单词速记训练营 第1天~ 21天 加油！ （雅途右脑单词速记）
    词汇速记训练营
    词汇速记训练营
    词汇速记训练营
    Windows下解决github push failed (remote: Permission to userA/XXXX.git denied to userB.) 上传gitHub失败报错
    WMITools修复wmi劫持--hao643.com/jtsh123劫持（修改快捷方式跳转至hao123.com）
    Ubuntu下载gitea
    go+cookie+angular踩过的坑
    golang中创建logger时候踩过的坑
  • 原文地址：https://www.cnblogs.com/bubu99/p/14742418.html
Copyright © 2011-2022 走看看