学习Vue的第一天

`v-for的基本使用`

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

点击查看代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(site, index) in sites">
          {{index}} -- {{site.text}}
        </li>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            sites: [{ text: 'Google' }, { text: 'Baidu' }, { text: 'Yandex' }],
          }
        },
      })
      app.mount('#app')
    </script>
  </body>
</html>

posted @ 2022-04-27 14:50 wjxuriel 阅读(14) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 学习Vue的第二天

· 学习Vue的第三天

· 前端-vue基础25-v-i和v-for结合使用

· vue基础之v-for，key

· Vue中的v-for

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！

公告

Live2D

Talk is cheap,
show me your code!

昵称： wjxuriel
园龄： 2年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

my-blog-site

Email： wjxuriel@petalmail.com

学习Vue的第一天

`v-for的基本使用`

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

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
	<div id="app">
	<ul>
	<li v-for="(site, index) in sites">
	{{index}} -- {{site.text}}
	</li>
	</ul>
	</div>
	<script>
	const app = Vue.createApp({
	data() {
	return {
	sites: [{ text: 'Google' }, { text: 'Baidu' }, { text: 'Yandex' }],
	}
	},
	})
	app.mount('#app')
	</script>
	</body>
	</html>