Vue.js Toggle elements

How using components and toggle elements

by VeVeO

HTML

<div id="page">
<showimgbutton></showimgbutton>
<img v-if="showImg" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426">
</div>

Vue

Vue.component('showimgbutton', {
	template: '<button @click="togglePic">showImg</button>',
  methods: {
        togglePic: function() {
            page.showImg = !page.showImg;
        },
    }
});

var page = new Vue({
    el: '#page',
    data: {
        showImg: true
    }
 });