[Vue 學習筆記(三)] vue iteration

前言

Vue 的 iteration 一樣有很多變化，這邊作一些紀錄

本文

重點:

1. 要設定 key
2. 除了 array 以外 object 一樣可以使用。
3. 除了 value 以外 key 以及 index 一樣可以 iterate
4. template 一樣可 iterate 但是 key 要放在 child element

<template>
  <div id="app">
    <div class="card" v-for="info in infos" :key="info.name">
      <div>
        <h1>{{info.name}}</h1>
      </div>
      <div>
        <ul v-for="stack in info.stacks" :key="stack">
          <li>{{stack}}</li>
        </ul>
      </div>
    </div>
    <div v-for="(value, key, index) in obj" :key="value">{{index}} {{key}} {{value}}</div>
    <template v-for="info in infos">
      <h1 :key="info.name">{{info.name}}</h1>
    </template>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      isShow: 0,
      infos:[{name: "james", stacks: ["js", "java", "css", "html"]}, {name: "charles", stacks: ["js", "java", "css", "html"]}],
      obj: {
        name: "charles",
        age: 23,
        job: "engineer"
      }
    }
  },
  methods:{
    handler: ()=>{
      isShow = !isShow
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.error{
  color: red
}

.success{
  color: green
}

.underline{
  text-decoration: underline;
}

</style>