1. 程式人生 > >vue2常用指令4 v-for

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>