Vue04_Vue基本指令3/3——列表循环、表单元素绑定（v-for/v-on补充/v-model）

54 阅读 0 评论 36 点赞

我是靠谱客的博主犹豫帅哥，最近开发中收集的这篇文章主要介绍Vue04_Vue基本指令3/3——列表循环、表单元素绑定（v-for/v-on补充/v-model），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、v-for

作用：根据数据生成列表结构
v-for常与数组结合使用
语法：（item，index）in 数据

如图：

效果：
v-for效果.png

item和index可以结合其他指令一起使用
数组的长度更新会同步到页面上，是响应式的

给上面实例添加两个button，实现元素增加与减少：

<body>
    <div id="app">
        <h2 v-for="item in game" :title="item.name">{{ item.name }}</h2>
        <input type="button" value="增加游戏" @click="add">
        <input type="button" value="减少游戏" @click="remove">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                game: [
                    { name: "和平精英" },
                    { name: "王者荣耀" },
                    { name: "英雄联盟" },
                ]
            },
            methods: {
                add() {
                    this.game.push({ name: "新晋游戏" });
                },
                remove() {
                    this.game.shift();
                }
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

二、v-on补充：传递自定义参数、事件修饰符

1. 事件的绑定可以写成函数调用的方式，传入自定义参数

例：

<body>
    <div id="app">
        <input type="button" value="点我" @click="doIt('老铁',666)">
        <input type="text" @keyup.enter="sayHi"> 
        <!-- 按下enter触发,可改为别的键，见api -->
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt(a,b){
                    alert(a);
                    alert(b);
                },
                sayHi(){
                    alert("吃了没？");
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

2. 事件的后面跟上" .修饰符 "可以对事件进行限制

2.1 .stop 修饰符：

阻止事件冒泡 @click.stop
相当于调用event.stopPropagation()

在这里插入图片描述

2.2 .prevent 修饰符：

阻止默认事件（例如formal表单默认提交）
@click.prevent

2.3 .监听某个键的键帽修饰符：

@keyup.enter（松开enter触发）

2.4 .once 修饰符：

@click.once（只触发一次）

三、v-model

便捷的获取和设置表单元素的值（双向数据绑定）
绑定的数据会和表单元素相关联
获取用户输入

例：

<body>
    <div id="app">
        <label for="" class="test">
            <input type="text" name="checbox" id="test" v-model="message">
        </label>
        <span>{{ message }}</span>

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "happy",
            }
        })
    </script>
</body>