<div id="app">
<form action="" class="mdl-grid">
<div class="mdl-textfield mdl-js-textfield">
<input v-model="texto" class="mdl-textfield__input" type="text" >
<label class="mdl-textfield__label" for="texto">Texto...</label>
</div>
</form>
<div class="mdl-grid">
<button v-on:click="voltearTexto"
class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-button--colored">
Voltear Texto
</button>
</div>
<div class="mdl-grid">{{texto}}</div>
</div>
let app = new Vue({
el: '#app',
data: {
texto: 'Hola soy un texto'
},
methods: {
voltearTexto: function () {
this.texto = this.texto.split('').reverse().join('');
}
}
});
