一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

前言

通过前两天的学习，我们知道了vue里面常用的两个指令和一些基础语法，今天的文章中，会通过一个TodoList的小功能带大家了解循环和双向绑定。

v-for循环

当页面上需要用ul下面的li标签来渲染一个数组时，我们是不是会这样写

<ul>
    <li>hello</li>
    <li>world</li>
    <li>dell</li>
    <li>lee</li>
</ul>

但是这是在数据少的情况下可以复制粘贴标签，修改内容就可以在页面上渲染出来了，那么如果数组里面有十几个，甚至几十个的时候呢？我们就要用到循环了，在vue中如何使用循环呢？就要看看下面的例子了！

我们首先把之前文章中的代码改造一下

Vue.createApp({
    data(){
        return {
            list: ['hello', 'world', 'dell', 'lee']
        }
    },
    template: `
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
    `
}).mount('#root');

通过v-for指令去循环list中的数据，将list中的每一项数据循环放到item中，并渲染到页面上

在循环的时候，我们也可以在item旁边加上一个index，这个index表示的是循环到第几项的下标。

<li v-for="(item, index) of list">{{item}} - {{index}}</li>

数据绑定

应用场景

首先我们需要清空data中的list的值，给一个空的数组，然后我们通过定义一个按钮，来触发一个点击事件，点击一次就在handleAddItem方法中给list追加一个值。

代码

 Vue.createApp({
    data(){
        return {
            list: []
        }
    },
    methods: {
        handleAddItem(){
            this.list.push('hello')
        }
    },
    template: `
        <div>
            <button v-on:click="handleAddItem">增加</button>
            <ul>
                <li v-for="(item, index) of list">{{item}} - {{index}}</li>
            </ul>
        </div>
    `
}).mount('#root');

chrome-capture (2).gif

问题

通过上面的这个代码我们可以看到，添加的都是固定的一个值hello，那如果我们要做一个动态添加不同的值，要怎么办呢？这时候就需要用到双向数据绑定的功能了。

双向数据绑定

初步了解一下

首先我们在template中定义一个input输入框，在输入框下面输出input中的值

Vue.createApp({
    data(){
        return {
            inputValue: ''
        }
    },
    template: `
        <div>
            <input v-model="inputValue" />
            <div>{{inputValue}}</div>
        </div>
    `
}).mount('#root');

v-model：双向数据绑定指令，通过这个指令，可以将v-model中的值和data中的inputValue进行绑定，做到同步更新。

chrome-capture (3).gif

一切都准备好了，那么我们就可以改造一下上面做的TodoList功能了，让输入框输入值之后，点击增加按钮触发点击事件，在页面上新增输入框中的值。

正式开始

Vue.createApp({
    data(){
        return {
            inputValue: '',
            list: []
        }
    },
    methods: {
        handleAddItem(){
            this.list.push(this.inputValue)
        }
    },
    template: `
        <div>
            <input v-model="inputValue" />
            <button v-on:click="handleAddItem">增加</button>
            <ul>
                <li v-for="item of list">{{item}}</li>
            </ul>
        </div>
    `
}).mount('#root');

在handleAddItem方法中，我们对list追加了data中定义的inputValue的值，而这个值是和input中的v-model绑定在一起的。

chrome-capture (4).gif

但是，我们发现每次增加之后，输入框的值还是存在，没有在新增之后清空输入框，那么我们怎么能够在增加之后清空输入框呢？

input输入框中的v-model是和data里面的inputValue的值进行双向数据绑定的，那么我们对inputValue进行清空的时候，是不是也就对input输入框进行清空了呢！改造一下handleAddItem方法

handleAddItem(){
    this.list.push(this.inputValue)
    this.inputValue = ''
}

在追加数据完成之后，将inputValue的值清空

chrome-capture (5).gif

总结

通过TodoList小功能一起了解到了vue里面的v-for循环指令和v-model双向数据绑定指令，当然这只是vue中的部分常用指令，后面还会用更多的小功能一起学习更多的指令。

【Vue3从零开始-第一章】1-3 v-for和v-model指令

前言