實現一個點選按鈕切換圖片的效果

  <div id="app">
    <img :src="src" alt="">
    <button @click=change(0)>1</button>
    <button @click=change(1)>2</button>
    <button @click=change(2)>3</button>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          src:"./image/1.jpg",
          list: [
            "./image/1.jpg",
            "./image/2.jpg",
            "./image/3.jpg"
          ]
        }
      },
      methods: {
        change(i){
          this.src = this.list[i]
        }
      },
    }).mount("#app")
  </script>
 

為解決程式碼重複的問題，優化程式碼，更簡潔的實現這個過程
引入渲染列表的概念

渲染列表

小例子

  <div id="app">
    <button @click="insert">新增</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          list: [
            "香蕉",
            "蘋果",
            "鴨梨"
          ]     
        }
      },
      methods: {
        insert(){
          this.list.push("草莓")
        }
      },
    }).mount("#app")
  </script>
 

通過v-for可以渲染列表，實現程式碼的優化

看回優化最上邊的圖片按鈕程式碼

  <div id="app">
    <img :src="src" alt="">
    <button 
      v-for="item,index in list"
      @click=change(index)
    >
      {{index+1}}
    </button>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          src:"./image/1.jpg",
          list: [
            "./image/1.jpg",
            "./image/2.jpg",
            "./image/3.jpg"
          ]
        }
      },
      methods: {
        change(i){
          this.src = this.list[i]
        }
      },
    }).mount("#app")
  </script>
 

這樣的好處是，會根據資料圖片的數量自動生成按鈕