Vue.js 循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<script src="https://unpkg.com/vue@next"></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: 'Runoob' },{ text: 'Taobao' }]}}
}Vue.createApp(app).mount('#app')
</script>
</body>

v-for 还支持一个可选的第二个参数，参数值为当前项的索引：

index 为列表项的索引值：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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: 'Runoob' },{ text: 'Taobao' }]}}
}Vue.createApp(app).mount('#app')
</script>
</body>

模板 <template> 中使用 v-for：

<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: 'Runoob' },{ text: 'Taobao' }]}}
}Vue.createApp(app).mount('#app')
</script>
</body>

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

<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.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}}
}Vue.createApp(app).mount('#app')
</script>
</body>

你也可以提供第二个的参数为键名：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}}
}Vue.createApp(app).mount('#app')
</script>
</body>

第三个参数为索引：

<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.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}}
}Vue.createApp(app).mount('#app')
</script>
</body>

v-for 迭代整数

v-for 也可以循环整数

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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>

显示过滤/排序后的结果

我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。

输出数组中的偶数：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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>

v-for/v-if 联合使用

以上实例联合使用 v-for/v-if 给 select 设置默认值：

v-for 循环出列表，v-if 设置选中值：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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: "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>
</body>

在组件上使用 v-for

如果你还没了解组件的内容，可以先跳过这部分。

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

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

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

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

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

下面是一个简单的 todo 列表的完整例子：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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><inputv-model="newTodoText"id="new-todo"placeholder="例如：明天早上跑步"/><button>添加</button></form><ul><todo-itemv-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: '上 RUNOOB 学习'}],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>

Vue.js 循环语句相关推荐

vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
Python学习 Day26 JS循环语句（二）
JS循环语句(二) (一)寻找质数输出1-100之间的质数 for(var num = 1;num <= 100;num++){//累加器,只要遇到是数字num的约数,这个变量就进行+1var ...
educoder头歌实训 web课——JavaScript语言基础：JS循环语句
educoder头歌实训太原理工大学web课程----JavaScript语法基础:JS运算符_玛卡巴卡的博客-CSDN博客第1关:while类型任务描述质数的定义如下:大于1的自然数,且除 ...
JavaScript学习手册七：JS循环语句
第1关:while类型求出小于等于整数a的所有质数: 计算并返回所有这些质数的和: 具体请参见后续测试样例. function mainJs(a) {a = parseInt(a);//请在此处编写 ...
Vue.js学习笔记（3）循环语句
文章目录 Vue.js 循环语句 v-for 迭代对象 v-for 迭代整数 Vue.js 循环语句循环语句需要使用到v-for指令,它是一种site in site形式的特殊语法.sites 是源 ...
vue条件语句与循环语句的基本使用
目录 Vue.js 条件语句 Vue.js 循环语句 Vue.js 条件语句条件判断使用 v-if 指令 <!DOCTYPE html> <html> <head> ...
前端Vue.js框架是什么？有哪些特点？
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
Vue.js （比JQuery更加精简的前端框架）
Vue.js简介什么是 Vue 什么是 Vue? 考虑这个需求: 我们要把一个 json对象的数据,显示到一个元素上去. 如果不使用 Vue, 那么就会用到 JS 或者 JQuery,通过操作 H ...
vue.js根据数据循环生成表格_vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for {{ item.message }} var example1 = new Vue({ el: '#example-1', ...

Vue.js 循环语句

显示过滤/排序后的结果

Vue.js 循环语句相关推荐

最新文章

热门文章