04. [初识]Vue3循环和数据双向绑定-佳丽列表的制作

本文通过完成大宝剑城展示佳丽列表的需求,学习一下在Vue3.x中如何进行循环展示和双向数据绑定。如果你想严肃点学习,可以把它看作是一个TodoList的小功能,形式不同,知识不变。

编写Vue3的基本结构

在项目根目录,新建一个文件Demo4.html,然后把Demo1.html的代码全部复制过来,修改下面代码的样子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佳丽列表</title>
    <script src="https:[email protected]"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>

</html>

声明佳丽数组并循环出来

我们反复强调小伙伴们的编程思想要从面向DOM,转变成面向数据的编程。这时候我们就需要一个数据佳丽列表。在createrApp()方法里增加一个data()方法,声明list[]数组。

data() {
    return {
        list: ['1-小红','2-小影','3-小丽']
    }
},

有了数组,需要在模板中循环出来。这个需要用到v-for指令.

template: `
    <ul>
        <li v-for="item of list">{{item}}</li>
    </ul>
`

这句代码的意思是,我要进行循环,循环的数据是list,list中的每一项我会放到item中,然后使用字面量在模板中进行展示就可以了。

v-for指令还有一个索引值,可以如下写法,打印出索引值。

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

会了循环之后,我们就可以根据前面的知识,做一个动态的可交互的佳丽列表了。

动态增加佳丽

先来做一个简单的效果,就是点击按钮后,就增加一个佳丽到列表中。先去掉数组中的值,然后来写一个按钮,按钮绑定handleAddItem事件。代码如下:

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

Vue3循环和数据双向绑定

现在增加的佳丽都是一样的,而我们最终的目的是能够自定义的增加佳丽,也就是想加小丽加小丽,想加小红加小红。这个时候我们就需要一个input输入框了,而且需要用v-model指令进行绑定。

代码如下:

<script>
    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,index) of list">[{{index}}]{{item}}</li>
                </ul>
            </div>
        `
    }).mount("#app")
</script>

这时候我们就可以根据我们的喜欢增加佳丽了,比如增加一个小丽小影小红

现在这个效果还是不太完美,在实际工作中,如果我们增加完成后,希望<input/>的值为空。这个时候你要再明白Vue中的一个特性,就是双向数据绑定。也就是这时候我们改变inputValue的值,页面文本框的内容也会被清空。

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

写完后,可以在浏览器中打开,看一下最终的效果。

Vue3循环和数据双向绑定-佳丽列表的制作

总结

本文我们学到两个指令,分别是v-for循环指令,v-model数据双向绑定。后面我们还会继续详解这些内容。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 04. [初识]Vue3循环和数据双向绑定-佳丽列表的制作

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们