【无标题】

一、今日学习目标
1.指令补充
指令修饰符
v-bind对样式增强的操作
v-model应用于其他表单元素
二、指令修饰符
1.什么是指令修饰符？
​ 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符
@keyup.enter —>当点击enter键的时候才触发，键盘回车监听
代码演示：

 

   

@keyup.enter  →  监听键盘回车事件

   
 

 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3.v-model修饰符
v-model.trim —>去除首位空格
v-model.number —>转数字
4.事件修饰符
@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
 

 

   

v-model修饰符 .trim .number

    姓名：

    年纪：

    
   

@事件名.stop     →  阻止冒泡

   

     

儿子

   

   

@事件名.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
45
46
47
48
三、v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

1.语法：

:class = "对象/数组">这是一个div

1
2.对象语法
当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

1
​ 适用场景：一个类名，来回切换

3.数组语法
当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

1
使用场景:批量添加或删除类

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
四、京东秒杀-tab栏切换导航高亮
1.需求：
​ 当我们点击哪个tab页签时，哪个tab页签就高亮

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
3.思路：
1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

五、v-bind对有样式控制的增强-操作style
1.语法

1
2.代码练习

 

   

 

 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3.进度条案例
 

   

     

        50%
     

   

    设置25%
    设置50%
    设置75%
    设置100%
 

 
 

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

六、v-model在其他表单元素的使用
1.讲解内容：
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea     ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...
1
2
3
4
5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

————————————————
版权声明：本文为CSDN博主「老牛源码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/shenchengyv/article/details/135202862