Vue練習

二、練習2:利用v-for抓出陣列

結果:

See the Pen Vue02-抓出陣列.0

參考連結:

Vue.js CDN】、【v-for

說明:

S1:JS設定

var shops=[
    {
      name:"apple",
      price:1000,
      produce:["美國","日本"]
    },
    {
      name:"banana",
      price:500,
      produce:["台灣","菲律賓"]
    },
    {
      name:"papaya",
      price:800,
      produce:["亞斯蘭提斯","印度"]
    }
];
new Vue({
  el:'#app',
  data:{lists:shops}
 });
console.log(shops);

S2:Html結構填空

<div id="app">
  <h1>v-for 抓出陣列</h1>
  <ul>
    <li v-for="(list,id) in lists">
      <div>第{{id}}項:</div>
      <div>名稱:{{list.name}}</div>
      <div v-text="'價格:'+list.price+'元'"></div>
      <div>{{aaa}}</div>
      <div>產地:
        <span v-for="country in list.produce" v-text="country+' / '"></span>
      </div>
    </li>
  </ul>
</div>