c4 點擊雙向切換圖片

by BDeer

HTML

<div id="app">
 <img :src="src" :alt="alt">
 <button @click="changeImg">雙向開關</button>
</div>

CSS

img {
			width: 200px;
			height: 150px;
		}

Vue

var vmBindOn = new Vue({
 el: '#app',
 data: {
  isActive: true,
  alt: '小狗圖1',
  src: 'https://cdn1-www.dogtime.com/assets/uploads/2010/12/puppies.jpg'
 },
 methods: {
  changeImg() {
   this.isActive = !this.isActive
   if (this.isActive == true) {
    this.alt = '小狗圖1';
    this.src = 'https://cdn1-www.dogtime.com/assets/uploads/2010/12/puppies.jpg';
   } else {
    this.alt = '小狗圖2';
    this.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMBkk9BUpFrfB1SRCUnD61Wm7EHG6E8fKHGAzOQvHWsAHX4GlYYQ';
   }
  }
 }
})