Vue.Js On Click Reverse String Example

Vue.Js

Nicesnippets

439

17-08-2020


Vue.Js On Click Reverse String Example

Hi Guys,

In this example,I will show on click method to reverse string example in vue.js.To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instancesyou can easyliy on click method useing reverse string example in vue.js.

Here, I will give you full example for simply on click reverse string using vue.js as bellow.

Script Code


<script>

new Vue({

el: "#app",

data: {

message: 'Hi Dev Welcome to nicesnippets.com'

},

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

}

})

</script>

Full Example

<!DOCTYPE html>

<html>

<head>

<title>Vue Js On Click Reverse String Example</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body class="bg-dark">

<div class="container">

<div class="col-md-6 offset-md-3">

<div class="card mt-5">

<div class="card-header">

<h5>Vue Js On Click Reverse String Example</h5>

</div>

<div class="card-body">

<div id="app">

<p>{{ message }}</p>

<button v-on:click="reverseMessage" class="btn btn-block btn-success">Click Reverse String</button>

</div>

</div>

</div>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

<script>

new Vue({

el: "#app",

data: {

message: 'Hi Dev Welcome to nicesnippets.com'

},

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

}

})

</script>

</body>

</html>

It Will help you...


Recommended Posts