JSFiddle - React, Tailwind, and code Playground

by nguyentienquan

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ title }}</h1>
  
  <button @click="show">SHOW</button>
  
  <p v-if="showParagraph">
    hello! How are you? I'm fine. Thank you! And you?
  </p>
</div>

<div id="app2">
  <h1>{{ title }}</h1>
  <button @click="onChangeTitle">Change title of first Vue</button>
</div>

JavaScript

var vn = new Vue ({
	el: '#app',
  data: {
  	title: 'Vai dieu ve Vue Instance',
    showParagraph: false,
  },
  methods: {
  	show: function() {
    	this.showParagraph = true
    }
  }
});

var jp = new Vue ({
	el: '#app2',
  data: {
  	title: 'Hello World',
  },
  methods: {
  	onChangeTitle: function () {
    	vn.title = "Change Title"
    }
  }
});
vn.description='Tien Quan';
console.log(vn);