4 list[] 数组v-forv-model
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4 list[] 数组v-forv-model相关的知识，希望对你有一定的参考价值。
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://unpkg.com/vue@next"></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>
现在增加的佳丽都是一样的，而我们最终的目的是能够自定义的增加佳丽，也就是想加小丽加小丽，想加小红加小红。这个时候我们就需要一个 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>
这时候我们就可以根据我们的喜欢增加佳丽了，比如增加一个小丽、小影和小红。
现在这个效果还是不太完美，在实际工作中，如果我们增加完成后，希望的值为空。这个时候你要再明白Vue中的一个特性，就是双向数据绑定。也就是这时候我们改变inputValue的值， 页面文本框的内容也会被清空。
methods:
handleAddItem()
this.list.push(this.inputValue)
this.inputValue = ''
,
写完后，可以在浏览器中打开，看一下最终的效果。
总结
本文我们学到两个指令，分别是 v-for 循环指令，v-model 数据双向绑定。后面我们还会继续详解这些内容。
v-model 仅用于以下控件：
<input><select><textarea>- 组件
v-model以Vue 实例的数据作为数据来源，应当在组件的 data 选项中声明初始值，之后通过监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
以上是关于4 list[] 数组v-forv-model的主要内容，如果未能解决你的问题，请参考以下文章