JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button v-on:click="isChanged = !isChanged">Change@@</button>
  {{isChanged}}
  <img :src='imageURL' alt="">
  {{imageURL}}
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: function () {
  	return {
			imageURL: 'https://www.grap.io/images/chat/chat_list_btn_favorite_off_hover.png',
      isChanged: false
    }
  },
  watch: {
  	isChanged: function(newVal) {
    	if (newVal) {
	      this.imageURL = 'https://cdn-images-1.medium.com/fit/c/60/60/0*k6Vzz_7jU2jXNEXT.jpeg'      			
      } else {
	      this.imageURL = 'https://www.grap.io/images/chat/chat_list_btn_favorite_off_hover.png'
      }
    }
	},
})