JSFiddle - React, Tailwind, and code Playground

by Federico

HTML

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

<div id="app">
    <h1>{{ age * 2 }}</h1>
    <hr>
    <h1>{{ age > 60 ? 'Old' : 'Young' }}</h1>
    <hr>
    <h1>{{ name.split(' ')[0] }}</h1>
    <hr>
    <h1>{{ getFullName1() }}</h1>
    <hr>
    <h1>{{ getFullName2(firstName, lastName) }}</h1>
    <hr>
    <h1>{{ getFullName3(firstName, lastName).name }}</h1>
    <hr>
    <a v-bind:href="blogUrl">Visit my blog</a>
</div>

JavaScript

new Vue({
    el: '#app',
    data: {
        message: 'Hello world!',
        age: 41,
        name: 'Federico Taddei',
        firstName: 'Federico',
        lastName: 'Taddei',
        blogUrl: 'http://codingexplained.com'
    },
    methods: {
        getFullName1: function() {
            console.log('From data property')
            return this.firstName + ' ' + this.lastName;
        },
        getFullName2: function(first, last) {
            console.log('From function parameters')
            return first + ' ' + last;
        },
        getFullName3: function(first, last) {
            console.log('From function parameters, returns an object')
            return {
                name: first + ' ' + last
            };
        }
    }
});