Vue sample bindings

by yeggor

HTML

<div id="app">
    Select language:
    <select v-model="language">
        <option v-for="lng in languages" v-bind:value="lng">
            {{ lng }}
        </option>
    </select>
    <br/><br/> 
    Saying hello in {{language}}:
    <br/><br/> 
    Enter your name: <input v-model="name" />
    <br/><br/> 
    {{ message }}
</div>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>

JavaScript

new Vue({
    el: '#app',
    data: {        
        languages: [
            'English',
            'Spanish',
            'Russian'
        ],
        language: 'English',
        name: '',        
        greetings: {
            'English': 'Hello {name}!',
            'Spanish': '¡Hola {name}!',
            'Russian': 'Привет, {name}!'
        }
    },
    computed: {
        message: function() {
            if (!this.name) return '';

            var greeting = this.greetings[this.language];

            return greeting.replace('{name}', this.name); 
        } 
    }
})