2020-11-18 Vue-07迴圈遍歷

coderLcy發表於2020-12-20
Vue

36

<body>
  <div id = "app">
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>
    <ul>
      <li v-for="(item, index) in names">
        {{index+1}}.{{item}}
      </li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        names: ['Kobe', 'James', 'Curry']
      }
    })
  </script>
</body>

 

遍歷物件

<body>
  <div id = "app">
    <ul>
      <li v-for="item in info">{{item}}</li>
    </ul>
    <ul>
      <li v-for="(value, key) in info">
        {{value}}---{{key}}
      </li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        info: {
          name: "Green",
          age: 31,
          height: 198
        }
      }
    })
  </script>
</body>

 

37

<body>
  <div id = "app">
    <ul>
      <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['a','b','c','d','e']
      }
    })
  </script>
</body>

 

 

38-那些陣列方法時響應式的

通過索引值改變陣列在Vue中不是響應式的

 

 

39作業回顧：點選誰誰變紅

  <style>
    .active{
      color: red;
    }
  </style>

​
<body>
  <div id = "app">
    <ul>
      <li v-for="(item, index) in movies"
      :class="{active: currentIndex === index}"
      @click="liClick(index)">
      {{index+1}}.{{item}}
    </li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['阿甘正傳','肖申克的救贖','霸王別姬','歸來','長城'],
        currentIndex: 0
      },
      methods: {
        liClick(index){
          this.currentIndex = index;
        }
      }
    })
  </script>
</body>

 

 

 

 

 

 

 

 

相關文章