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

2022-09-26 238

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

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

【Vue3从零开始-第一章】1-1 Hello world和计数器

【Vue3从零开始-第一章】1-2 v-on和v-if指令

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');
复制代码

$~G~5DGXBNE_`XZ`Y8R3M{L2.png$

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

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

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

6H_JD9TR0G$J72(L7M5Y6DA.png

数据绑定

应用场景

首先我们需要清空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');
复制代码

$5@1%GQ[{@]YY_3SAT4{57FO.png$

问题

通过上面的这个代码我们可以看到，添加的都是固定的一个值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进行绑定，做到同步更新。

$HG_6EN9%P4O1TKJD{H4IKAW.png$

一切都准备好了，那么我们就可以改造一下上面做的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绑定在一起的。

HAOQMCSVYIP%%%GH2{BD$)N.png

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

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

handleAddItem(){
    this.list.push(this.inputValue)
    this.inputValue = ''
}
复制代码

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

}{X$URL5YRFOFN@V9KMYW7A.png

总结

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

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

前言

v-for循环

数据绑定

应用场景

代码

问题

双向数据绑定

初步了解一下

正式开始

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景