<div id="app">
<input type="text" v-model="text">
<button @click="reverseText">Reverse Text</button>
<div class="showText">
{{newText}}
</div>
</div>input {
font-size: 50px;
}
button {
font-size: 50px;
}
.showText {
font-size: 50px;
}
var app = new Vue({
el: "#app",
data: {
text: "",
newText: ""
},
methods: {
reverseText: function() {
this.newText = this.text
.split("")
.reverse()
.join("");
}
}
});
External CSS
This Pen doesn't use any external CSS resources.