Vue.js String Split


JavaScript split function basically converts a string into array of substring. We can use the native JavaScript split function to convert a string into array of substring. Here in this article we are going to explain how you can use this method in Vuejs. You can also use online editor to edit and run the code online.


Vue.js String Split Method Example

Here is an example to use split function in vue.js-

Example:

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
	<div id="myId" ref="myId">{{ splitedStr }}</div>
	<button @click="myFunction()">Click Me</button>
</div>
<script>
 new Vue({
el: '#app',
  
  data: { 
	  str:"Welcome to Canada!",
	  splitedStr: ""
  },
  
   methods:{
    myFunction: function () {
		
		this.splitedStr = this.str.split(" ");
		
    }
	}

});
</script>        
</body>
</html>

Try it »

The above example will split the string at blank space (” “), you can also define other parameters as well such as split string at (-).

Output of above example-

Vue.js string split JavaScript Example

Advertisements

Add Comment

📖 Read More