vue2常用指令4 v-for

基于数据渲染一个列表,类似于JS中的遍历,期数据类型可以是Array | Object | number | string。

该指令之值,必须使用特定的语法(item,index) in items,为当前遍历元素提供别名。v-for的优先级别高于v-if之类的其他指令。

<body>
<div id="app">
<!--遍历数组-->
<p v-for='(score,index) in scores'>
{{index+':'+score}}
</p>
<p v-for='d in dog'>
{{d}}
</p>
<p v-for='str in name'>
{{str}}
</p>
<p v-for='p in phone'>
{{p}}
</p>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data () {
return {
scores:[85,65,75,98],//数组
dog:{name:'james',age:'3',height:'1.44'},//对象
name:'zhangsan',//字符
phone:'188888888'//数字
}
}
})
</script>
</body>

猜你喜欢

转载自blog.csdn.net/xfmuchengxue/article/details/80727093