 |
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Vue.JS入门教程 > v-for 循环指令 在模板中使用 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： v-for 循环指令-简易数组的使用 | 下一篇： v-for 循环指令-对象的迭代显示 |
|
在模板template中如何使用数组和循环显示。 核心语句：template v-for="neirong in shuzu" shuzu是我们定义的要循环现在是模板中的数组，neirong是代表数组中的每个元素。 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板中使用 v-for</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
<div id="app">
<ul>
<!--模板中循环显示字符数组shuzu的内容-->
<template v-for="neirong in shuzu">
<li>{{ neirong }}</li>
<li>--------------</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#app',//app为前面div区块的id的值，通过"#"号绑定
//data区域定义属性的值
data: {
shuzu:["香蕉","苹果","西瓜"]//定义数组
//后面没有数据，则这里定义完毕后面不需要跟上逗号"，"
}
})
</script>
</body>
</html>效果图
|
|
| 上一篇： v-for 循环指令-简易数组的使用 | 下一篇： v-for 循环指令-对象的迭代显示 |
