Vue[07]- 陣列v | Vue li v-model
昨天講完了「雙向綁定」,大家因該還記得有提到陣列v-for吧?它也是非常常用的基本語法喔!先來寫個簡單的範例吧!我們用
- 來寫一組共5人的名單,過去身為設計的我們,在寫靜態頁時一定是這樣寫的吧?
- Adam
- Jack
- Candy
- Louis
- Larry
昨天講完了「雙向綁定」,大家因該還記得有提到陣列v-for吧?它也是非常常用的基本語法喔!先來寫個簡單的範例吧!我們用<ul><li>來寫一組共5人的名單,過去身為設計的我們,在寫靜態頁時一定是這樣寫的吧?
<template> <div id="app"> <ul> <li>Adam</li> <li>Jack</li> <li>Candy</li> <li>Louis</li> <li>Larry</li> </ul> </div> </template>那如果改用v-for串資料呢?會是如何?
v-for實做 <template> <div id="app"> <ul> <li v-for="(item, index) in member" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { name: app, data() { return { member:[Adam,Jack,Candy,Louis,Lurry] } } } </script> 範例解說上面寫的這些是什麼意思呢?讓我來說明一下:我們先寫一組<ul><li>結構出來,並使用v-for="(item, index) in member"綁在<ul>上!
member:是我們在下方data()裡為資料陣列取的名子,item in是指在(in)member陣列裡...