- 场景
- 编写Vue3的基本结构
- 声明佳丽数组并循环出来
- 动态增加佳丽
- 总结
本文通过完成大宝剑城展示佳丽列表的需求,学习一下在Vue3.x中如何进行循环展示和双向数据绑定。
如果你想严肃点学习,可以把它看作是一个 TodoList
的小功能,形式不同,知识不变。
在项目根目录,新建一个文件 Demo4.html
,然后把Demo1.html的代码全部复制过来,修改下面代码的样子。
DOCTYPE html>
佳丽列表
Vue.createApp({
template: 'Hello World'
}).mount("#app")
声明佳丽数组并循环出来
我们反复强调小伙伴们的编程思想要从面向DOM,转变成面向数据的编程。这时候我们就需要一个数据佳丽列表。
在 createrApp()
方法里增加一个 data()
方法,声明 list[]
数组。
data() {
return {
list: ['1-小红','2-小影','3-小丽']
}
},
有了数组,需要在模板中循环出来。 这个需要用到 v-for
指令:
template: `
{{item}}
`
这句代码的意思是,我要进行循环,循环的数据是list,list中的每一项我会放到item中,然后使用字面量在模板中进行展示就可以了。
v-for指令还有一个索引值,可以如下写法,打印出索引值。
[{{index}}]{{item}}
会了循环之后,我们就可以根据前面的知识,做一个动态的可交互的佳丽列表了。
动态增加佳丽先来做一个简单的效果,就是点击按钮后,就增加一个佳丽到列表中。先去掉数组中的值,然后来写一个按钮,按钮绑定 handleAddItem
事件。
代码如下:
Vue.createApp({
data() {
return {
list: []
}
},
methods: {
handleAddItem() {
this.list.push("佳丽")
}
},
template: `
增加佳丽
- [{{index}}]{{item}}
`
}).mount("#app")
现在增加的佳丽都是一样的,而我们最终的目的是能够自定义的增加佳丽,也就是想加小丽加小丽,想加小红加小红。这个时候我们就需要一个
input
输入框了,而且需要用 v-model
指令进行绑定。
代码如下:
Vue.createApp({
data() {
return {
//---此处修改
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
//----此处修改
this.list.push(this.inputValue)
}
},
template: `
增加佳丽
- [{{index}}]{{item}}
`
}).mount("#app")
这时候我们就可以根据我们的喜欢增加佳丽了,比如增加一个小丽、小影和小红。
现在这个效果还是不太完美,在实际工作中,如果我们增加完成后,希望的值为空。这个时候你要再明白Vue中的一个特性,就是双向数据绑定。也就是这时候我们改变inputValue
的值, 页面文本框的内容也会被清空。
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
写完后,可以在浏览器中打开,看一下最终的效果。
本文我们学到两个指令,分别是 v-for
循环指令,v-model
数据双向绑定。后面我们还会继续详解这些内容。
v-model 仅用于以下控件:
- 组件
v-model以Vue 实例的数据作为数据来源,应当在组件的 data 选项中声明初始值,之后通过监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。