vue.js的v-for循环
2017-03-03 本文已影响156人
azerkang
vue.js的v-for,循环
<!DOCTYPE html>
<html>
<head>
<title>vue.js</title>
</head>
<body>
<div id="app">
<ul>
<!-- v-for:表示对当前标签进行循环，循环的对象为msg,msg为msgs中的数据 -->
<li v-for="msg in msgs">
{{ msg.text }}
</li>
</ul>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script >
new Vue({
el:'#app',
data:{
// <!-- msgs:为数组数据，跟Java中的数组差不多，相邻数据以逗号隔开 -->
msgs:[
{text:'java'},
{text:'android'},
{text:'ios'},
{text:'python'},
{text:'php'},
{text:'go'},
{text:'mysql'}
]
}
})
</script>
</html>
解释：
<li v-for="msg in msgs"><br>
v-for:表示对当前标签进行循环，循环的对象为msg,msg为msgs中的数据,基本跟Java中的用法一样。<br>
msgs:[
{text:'java'},
{text:'android'},
{text:'ios'},
{text:'python'},
{text:'php'},
{text:'go'},
{text:'mysql'}
]
msgs:为数组数据，跟Java中的数组差不多，相邻数据以逗号隔开，每个花括号对应为数组的一条数据，也就是'msg in msgs'中的msg。
