JSFiddle - React, Tailwind, and code Playground
HTML
<div id="person" class='bllu'>
First Name: <input class='redd' v-model="firstName"><br/>
Last Name: <input v-model="lastName"><br/>
<span>Full Name: <div class='redd'>{{fullName}}</div></span><br/>
</div>
CSS
.redd {color: red;}
.bllu {color: blue;}
JavaScript
var demo = new Vue({
el: '#person',
data: {
firstName: 'Taro',
lastName: 'Yamada',
},
computed: {
fullName: {
get: function(){
return this.firstName + ' ' + this.lastName;
}
}
},
})