VUE3菜鸟教程：v-for 循环语句

2021-08-2015:12:59WEB前端开发Comments2,495 views字数 2764阅读模式

循环使用 v-for 指令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for 可以绑定数据到数组来渲染一个列表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for 实例

<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

Vue.createApp(app).mount('#app')
</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for 还支持一个可选的第二个参数，参数值为当前项的索引：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for 实例

index 为列表项的索引值：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

<div id="app">
<ol>
<li v-for="(site, index) in sites">
{{ index }} -{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

Vue.createApp(app).mount('#app')
</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

模板 <template> 中使用 v-for：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for

<ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul>

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> const app = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } } } Vue.createApp(app).mount('#app') </script>

你也可以提供第二个的参数为键名：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

第三个参数为索引：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

v-for 迭代整数

v-for 也可以循环整数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

显示过滤/排序后的结果

我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for 实例

输出数组中的偶数：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

<div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>

v-for/v-if 联合使用

以上实例联合使用 v-for/v-if 给 select 设置默认值：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

v-for/v-if 实例

v-for 循环出列表，v-if 设置选中值：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

<div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!-- 索引为 1 的设为默认值，索引值从0 开始--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>您选中了:{{selOption}}</div> </div> <script> const app = { data() { return { selOption: "Runoob", sites: [ {id:1,name:"Google"}, {id:2,name:"Runoob"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } } } Vue.createApp(app).mount('#app') </script>

在组件上使用 v-for

如果你还没了解组件的内容，可以先跳过这部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

下面是一个简单的 todo 列表的完整例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html

实例

<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" /> <button>Add</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul> </div>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22224.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/22224.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定