小白教程
所有教程
关于
Search
172.71.254.67
172.71.254.67
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Vue3 循环语句”的源代码
本页内容
上一节:
Vue3_条件语句
下一节:
Vue3_组件
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Vue3 循环语句}}[[Category:Vue 3 教程|9]] == Vue.js 循环语句 == 循环使用 v-for 指令。 v-for 指令需要以 '''site in sites''' 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: == v-for 实例 == <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <ol> <li v-for="site in sites"> {{ site.text }} </li> </ol> </div> <script> const app = { data() { return { sites: [ { text: 'Google' }, { text: 'xiaoBai' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script> </head> <body> <div id="app"> <ol> <li v-for="site in sites"> {{ site.text }} </li> </ol> </div> <script> const app = { data() { return { sites: [ { text: 'Google' }, { text: 'xiaoBai' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> v-for 还支持一个可选的第二个参数,参数值为当前项的索引: == v-for 实例 == index 为列表项的索引值: <sample title="" desc="" lang="html" hererun="1"> <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: 'xiaoBai' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <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: 'xiaoBai' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> 模板 <template> 中使用 v-for: == v-for == <sample title="" desc="" lang="html" hererun="1"> <ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul> </div> <script> const app = { data() { return { sites: [ { text: 'Google' }, { text: 'xiaoBai' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> === v-for 迭代对象 === v-for 可以通过一个对象的属性来迭代数据: == v-for == <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> const app = { data() { return { object: { name: '小白教程', url: 'http://www.xiaobai.wang', slogan: '学习使人快乐!' } } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> const app = { data() { return { object: { name: '小白教程', url: 'http://www.xiaobai.wang', slogan: '学习使人快乐!' } } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> 你也可以提供第二个的参数为键名: == v-for == <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div> <script> const app = { data() { return { object: { name: '小白教程', url: 'http://www.xiaobai.wang', slogan: '学习使人快乐!' } } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> 第三个参数为索引: == v-for == <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> <script> const app = { data() { return { object: { name: '小白教程', url: 'http://www.xiaobai.wang', slogan: '学习使人快乐!' } } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> === v-for 迭代整数 === v-for 也可以循环整数 == v-for == <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div> <script> Vue.createApp(app).mount('#app') </script> </body> </html> </run> == 显示过滤/排序后的结果 == 我们可以对数组的元素进行处理后再显示出来,一般可以通过创建一个计算属性,来返回过滤或排序后的数组。 == v-for 实例 == 输出数组中的偶数: <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div> <script> const app = { data() { return { numbers: [ 1, 2, 3, 4, 5 ] } }, computed: { evenNumbers() { return this.numbers.filter(number => number % 2 === 0) } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> === v-for/v-if 联合使用 === 以上实例联合使用 v-for/v-if 给 select 设置默认值: == v-for/v-if 实例 == v-for 循环出列表,v-if 设置选中值: <sample title="" desc="" lang="html" hererun="1"> <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: "xiaoBai", sites: [ {id:1,name:"Google"}, {id:2,name:"xiaoBai"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <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: "xiaoBai", sites: [ {id:1,name:"Google"}, {id:2,name:"xiaoBai"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> == 在组件上使用 v-for == 如果你还没了解组件的内容,可以先跳过这部分。 在自定义组件上,你可以像在任何普通元素上一样使用 v-for: <pre><my-component v-for="item in items" :key="item.id"></my-component></pre> 然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 props: <pre><my-component v-for="(item, index) in items" :item="item" :index="index" :key="item.id" ></my-component></pre> 不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。 下面是一个简单的 todo 列表的完整例子: <sample title="" desc="" lang="html" hererun="1"> <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> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">添加 todo</label> <input v-model="newTodoText" id="new-todo" placeholder="例如:明天早上跑步" /> <button>添加</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> <script> const app = Vue.createApp({ data() { return { newTodoText: '', todos: [ { id: 1, title: '看电影' }, { id: 2, title: '吃饭' }, { id: 3, title: '上 XiaoBai.Wang 学习' } ], nextTodoId: 4 } }, methods: { addNewTodo() { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' } } }) app.component('todo-item', { template: ` <li> {{ title }} <button @click="$emit('remove')">删除</button> </li> `, props: ['title'], emits: ['remove'] }) app.mount('#todo-list-example') </script> </body> </html> </run>
返回至“
Vue3 循环语句
”。
上一节:
Vue3_条件语句
下一节:
Vue3_组件