Vue Js String Substring Method: The Vue.js string substring method is used to extract the characters from a string between two specified indices, and returns the new sub-string The extracted characters are stored in a new string, beginning at the start index and going up to but not including the end index When start exceeds end, the arguments are reversed: (6, 2) (2, 6). Here in this tutorial, we will explain how to use substring with a vue js example, which is given below.
How to get a substring from a text in Vue Js?
Vue.js provides a variety of methods for extracting substrings from text by string. substring() method, which can be used to find parts of text.
Vue Js Substring Method
<div id="app">
<button @click="myFunction">click me</button>
<p>Text: {{text}}</p>
<p>Part of string :{{results}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
text :'This sample string illustrates how to use the substring method.',
results:''
}
},
methods:{
myFunction(){
this.results = this.text.substring(0,18);
},
}
}).mount('#app')
</script>
Output of above example
what happen If the beginning is greater than the ending
If the start parameter is greater than the end parameter, they are swapped so that the function run properly
Vue Js swapped substring Example
<div id="app">
<button @click="myFunction">click me</button>
<p>Text: {{text}}</p>
<p>Part of string :{{results}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
text :'This sample string illustrates how to use the substring method.',
results:''
}
},
methods:{
myFunction(){
this.results = this.text.substring(18,0);
},
}
}).mount('#app')
</script>
Output of above example
