JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div id="app1">
    <h1>{{ title }}</h1>
	<!-- show paragraph na klik -->
    <button v-on:click="show">Show Paragraph</button>
	<!-- v-if kada je showParagraph true show or else no -->
    <p v-if="showParagraph">This is not always visible.</p>
</div>

<div id="app2">
	<h1>{{ title }}</h1>
	<button v-on:click="onChange">Change title 1</button>
</div>

JavaScript

var vm1 = new Vue({
    el: '#app1',
    data: {
        title: 'The VueJS Instance',
        showParagraph: false
    },
    methods: {
        show: function() {
            this.showParagraph = true;
            this.updateTitle('The VueJS Instance (Updated)');
        },
        updateTitle: function(title) {
            this.title = title;
        }
    },
    computed: {
        lowercaseTitle: function() {
            return this.title.toLowerCase();
        }
    },
    watch: {
        title: function(value) {
            alert('Title changed, new value:' + value);
        }
    }
});

// change title by timer
setTimeout(function() {
	vm1.title = 'Changed by Timer!';
}, 3000);

var vm2 = new Vue ({
	el: '#app2',
	data: {
		title: 'The second Instance'
	},
	methods: {
	// change title from Vue instance 1
		onChange: function() {
			vm1.title = 'Changed!';
		}
	}
});

// globally
// vm1.title= 'New';
vm1.newProp= 'New';
console.log(vm1)