Content Table
2016-11-08

Vue 使用 v-for 和设置属性及事件处理

Vue 中使用 v-for 遍历数组，设置属性使用指令 v-bind，输入和数据绑定用 v-model，事件处理则用 v-on。

插值时需要用 { { } }，但是使用指令时不用，指令用 v- 作为前缀，例如

  • v-for
  • v-if
  • v-show
  • v-bind
  • v-on: v-on:click="say" or v-on:click="say('参数', $event)"

v-bind 和 v-on 有简写形式 : 和 @

  • 例如设置属性 data-name 使用指令 v-bind:data-name，其简写为 :data-name
  • 点击事件使用 v-on:click，其简写为 @click

事件修饰符

  • .stop 阻止冒泡，调用 event.stopPropagation()
  • .prevent 阻止默认事件，调用 event.preventDefault()
  • .capture 添加事件侦听器时使用事件捕获模式
  • .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
66
67
68
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
    <script src="http://cdn.staticfile.org/vue/2.0.3/vue.min.js"></script>
    <script src="http://cdn.staticfile.org/artTemplate.js/3.0/template.js" charset="utf-8"></script>

    <style media="screen">
        body {
            font-family: "微软雅黑", Helvetica, Arial, sans-serif;
        }

        .active {
            background: #EEE;
        }

        li {
            cursor: default;
        }
    </style>
</head>

<body>
    <!-- Vue 使用的模版 -->
    <div id="vue-app">
        <input type="text" v-model="username" @keyup.enter="alert(username)" placeholder="输入用户名">
        
        <ul>
            <li v-for="province in provinces" :data-id="province.id" :key="province.id">{{province.name}}</li>
            <li v-show="provinces.length === 0">没有数据</li>
        </ul>
        <hr/>
        <ul>
            <li v-for="(province, index) in provinces"
                :data-id="province.id"
                :class="currentIndex==index? 'active' : ''"
                @click="currentIndex=index">
                {{province.name}} - {{index}}
            </li>
        </ul>

        Current Index: {{currentIndex}}
    </div>

    <script>
        $(document).ready(function() {
            // 使用 Vue
            var app = new Vue({
                el: '#vue-app',
                data: {
                    username: '',
                    currentIndex: -1,
                    provinces: [
                        {id: 100, name: '北京'},
                        {id: 102, name: '上海'},
                        {id: 103, name: '深圳'},
                        {id: 104, name: '贵州'}
                    ]
                }
            });
        });
    </script>
</body>

</html>

参考资料

官方文档