vue学习笔记2

指令修饰符

概念:通过“.”指明一些指令后缀，不同后缀封装了不同的处理操作，以此简化代码

按键修饰符
@keyup.enter，监听键盘回车
v-model修饰符
v.model.trim，去除首尾空格
v-model.number，转数字
事件修饰符
事件名.stop，阻止冒泡
事件名.prevent，阻止默认事件

v-bind对于样式控制的增强

语法：:class=”对象/数组”
语法：:style=”对象/数组”

1.对象：键就是类名，值是布尔值。如果值为true，有这个类/样式，否则没有。
使用场景：一个类名/样式，来回切换
2.数组：数组中所有的类/样式都会添加到盒子上，本质是一个class/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
    <style>
        li{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            list-style: none;
        }
        .active{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" key="index" :class={active:activeIndex===index} @click="activeIndex=index">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                activeIndex:0,
                list:[111111,222222,333333]
            }
        })
    </script>
</body>
</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
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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .progress{
            width: 500px;
            height: 50px;
            border: 3px solid pink;
        }
        .inner{
            background-color: aqua;
            width: 50%;
            max-width: 100%;
            height: 50px;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="progress">
            <div class="inner" :style="{width: percent+'%'}"></div>
        </div>
        <input type="number" v-model="percent">
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                percent:50,
            }
        })
    </script>
</body>

</html>