這次將介紹v-for,v-if,v-bind的用法

這次使用這筆資料來當作練習

fruits=[
    {
        "fruit": "蘋果",
        "color": "red",
        "show": false
    },
    {
        "fruit": "香蕉",
        "color": "yellow",
        "show": false
    },
    {
        "fruit": "哈密瓜",
        "color": "green",
        "show": true
    },
    {
        "fruit": "葡萄",
        "color": "purple",
        "show": true
    },
    {
        "fruit": "橘子",
        "color": "orange",
        "show": true
    },
    {
        "fruit": "火龍果",
        "color": "red",
        "show": true
    },
    {
        "fruit": "芭樂",
        "color": "green",
        "show": true
    },
    {
        "fruit": "柳丁",
        "color": "orange",
        "show": true
    },
    {
        "fruit": "奇異果",
        "color": "green",
        "show": true
    }
];

• v-for
  v-for是用來將array形式的資料一次帶入網頁的方式，可以支援json的格式，這在需要一次放入大量資料時非常好用

  ul
      li(
        v-for="fruit in fruits" 
        ) {{fruit.fruit}}
  

  在 v-for="fruit in fruits" 中 fruit代表在html的部分定義的變數名稱，而fruits則是在vue的data裡面一個叫做fruits的變數名稱，所以在這邊會把fruits裡的所有元素一一對應給前面fruit
  此時第一項代表:
  {{fruit}} = { "fruit": "蘋果", "color": "red", "show": false }
  {{fruit.fruit}} = 蘋果
  {{fruit.color}} = red
  {{fruit.show}} = false

• v-if
  v-if是用來做條件判斷的

  ul
      li(
        v-for="fruit in fruits" 
        v-if="fruit.show" 
        ) {{fruit.fruit}}
  

  在這邊當fruit中的show為true時 就會在網頁上面顯示
  所以在此第一項蘋果不會被顯示出來

• v-bind
  v-bind可以用來綁定屬性，如class,style都可以

  ul
      li(
        v-for="fruit in fruits" 
        v-if="fruit.show" 
        v-bind:style="{color:fruit.color}"
        ) {{fruit.fruit}}
  

  在這邊將style綁定，所以會指定fruit中的color到定義的css的color中來顯示不同的顏色
  第二項就會顯示為
  

• v-if 也可以使用v-else-if,v-else,以及多條件判斷

  ul
      li(
      v-for="fruit in fruits" 
      v-if="fruit.color==='red' && fruit.show" 
      v-bind:style="{color:fruit.color}"
      ) {{fruit.fruit}}
      li(
      v-else-if="fruit.color==='green' || fruit.color==='orange'" 
      v-bind:style="{color:fruit.color}"
      ) {{fruit.color}}
      li(
      v-else
      ) {{fruit.show}} {{fruit.color}}
  

  結果如下
  

  本次程式碼https://codepen.io/FanWay/pen/BJLwwK