vue系列文章（9）v-for条件循环

最新推荐文章于 2023-12-06 20:00:23 发布

互联网极客

最新推荐文章于 2023-12-06 20:00:23 发布

阅读量2.3k

点赞数

分类专栏： ----前端开发

本文链接：https://blog.csdn.net/jsqfengbao/article/details/94740429

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<div id="app">
		<h1>v-for循环</h1>

		<!--数组下表-->
		{{ characters[0] }},
		{{ characters[1] }}
		<ul>
			<li v-for="(character,index) in characters">{{character}}</li>
		</ul>
		<ul>
			<li v-for="(user,index) in users">{{index+1}}-{{user.name}}-{{user.age}}</li>
		</ul>
		<div v-for="(user,index) in users">
			<h3>{{index}}.{{user.name}}.{{user.age}}</h3>
		</div>
		<template v-for="user in users">
			<div v-for="(val,key) in user">{{key}}-{{val}}</div>
		</template>
	</div>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

new Vue({
	el: '#app',
	data: {
		characters: ["Mario","luffy","yoshi"],
		users: [
			{name: 'Mario', age: 30},
			{name: 'luffy', age: 29},
			{name: 'yoshi', age: 30}
		]
	},
	methods: {
		
	},
	computed: {
		
	}
});

Vue系列文章目录

如果上面文章对你有用，打赏下我吧@*@

互联网极客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue系列文章（9）v-for条件循环

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法alias in expression，为当前遍历的元素提供别名：<div v-for="item in items"> {{ item.text }} </div>例子：<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫