How to replace a string in vue js ? - nexladder web tutorials

In this article, We’ll see how to replace a string in vue js?

Below an example to replace a string from “Morning” to “Evening”.

Every Vue application starts by creating a new Vue instance with the Vue function:

  var vm = new Vue ({ 
     // options
  })

new Vue ({e1: '#appContainer'}) will instantiate a new Vue instance. It accepts an options object as a parameter. This object is central in Vue, and defines and controls data and behavior.It contains all the information needed to create Vue instances and components.

    <!DOCTYPE html>
    <html>
    <head>
        <title>How to replace a string in Vue JS? - nexladder.com</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js?v=1"></script>
    </head>
    <body>

    <div id="appContainer">
        <div>{{ message }}</div>
        <button @click="replace()">Click Me</button>
    </div>

    </body>

    <script type="text/javascript">
        new Vue({
          el: '#appContainer',
          data: { 
              message:"Good Morning!"
          },
          methods:{
                replace: function () {
                    this.message = this.message.replace("Morning", "Evening");    
                }
          }
        });
    </script>
    </html>

That’s it!. Please share your thoughts or suggestions in the comments below.

Leave a Reply Cancel reply