v-for和v-on的补充

v-for

  1. 根据数据生成列表结构；

  2. 数组经常和v-for结合使用；

  3. 语法是v-for=“(item,index) in 数据”

  4. 遍历对象格式：（value,key）或（value,key，index）

  5. item和index可以结合其他指令一起使用；

  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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-for指令</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="添加" @click="add">
            <input type="button" value="删除" @click="reduce">

            <ul>
                <li v-for="(item,index) in arr">
                    {{index+1}}我要在{{item}}买房
                </li>
            </ul>
            <h2 v-for="item in foods" :title="item.name">
                {{item.name}}
            </h2>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            var app  = new Vue({
                el:"#app",
                data:{
                    arr:["北京","上海","杭州","郑州"],
                    foods:[{name:"西红柿鸡蛋"},
                            {name:"西兰花"}]
                },
                methods:{
                    add:function(){
                        this.foods.push({name:"西红柿"});
                    },
                    reduce:function(){
                        this.foods.shift();
                    }
                }
            })
        </script>
    </body>
    </html>

v-on补充

  1. 事件绑定的方法写成函数调用的形式，可以传入自定义参数。
  2. 定义方法时需要定义形参来接收传入的实参。
  3. 事件的后面跟上.修饰符可以对事件进行限制
  4. .enter可以限制触发的按键为回车
  5. 如果方法不需要额外的参数，那么方法后的（）可以不添加。但是注意：如果方法本身中有一个参数，那么默认将原生事件event参数传递进去。
  6. 如果需要同时传入某个参数，同时需要浏览器参数的event对象时，可以通过$event传入事件。
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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <!-- 方法处理器 -->
<!-- <button v-on:click="doThis"></button> -->

<!-- 动态事件 (2.6.0+) -->
<!-- <button v-on:[event]="doThis"></button> -->

<!-- 内联语句 -->
<!-- <button v-on:click="doThat('hello', $event)"></button> -->

<!-- 缩写 -->
<!-- <button @click="doThis"></button> -->

<!-- 动态事件缩写 (2.6.0+) -->
<!-- <button @[event]="doThis"></button> -->

<!-- 停止冒泡 -->
<!-- <button @click.stop="doThis"></button> -->

<!-- 阻止默认行为 -->
<!-- <button @click.prevent="doThis"></button> -->

<!-- 阻止默认行为，没有表达式 -->
<!-- <form @submit.prevent></form> -->

<!--  串联修饰符 -->
<!-- <button @click.stop.prevent="doThis"></button> -->

<!-- 键修饰符，键别名 -->
<!-- <input @keyup.enter="onEnter"> -->

<!-- 键修饰符，键代码 -->
<!-- <input @keyup.13="onEnter"> -->

<!-- 点击回调只会触发一次 -->
<!-- <button v-on:click.once="doThis"></button> -->

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
    <div id="app">
        <input type="button" value="点击" @click="doit(666,'你好')">
        <input type="text" @keyup.enter="hello">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{

            },
            // 传参与事件的传值相对应
            methods:{
                doit:function(p1,p2){
                    console.log("老铁！");
                    console.log(p1,p2)
                },
                hello:function(){
                    alert("你好！")
                }
            }
        })

    </script>
</body>
</html>
学习笔记 Vue
Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！