vue2常用指令4 v-for
阿新 • • 發佈:2018-12-14
基於資料渲染一個列表,類似於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>