Vue Concat String with Space: In Vue.js, string interpolation is a feature that allows developers to dynamically generate strings by embedding expressions within them. The ${} operator is used to enclose expressions within strings, and Vue.js will evaluate the expression and substitute the result in the string. To concatenate two strings with a space in between, you can enclose the space within quotes and use the ${} operator to concatenate the two strings.
How can you concatenate two strings with a space in Vue js?
In Vue.js, you can concatenate two strings with a space by using the template literal syntax and the interpolation syntax. To do this, you can use the string concatenation operator “+” or the string template literal syntax “${}” with a space in between the two strings. For example, you can use ${string1} ${string2} to concatenate two strings with a space.
Vue Concat String with Space Example
<div id="app">
<p>Question:{{question}} </p>
<p>option 1:{{option1}} </p>
<p>Option 2: {{option2}}</p>
<p>Option 3: {{option3}}</p>
<p>Option 4:{{option4}} </p>
<button @click="concatWithSpace">click me to concat</button>
<pre v-if="result">Concat with Space:{{result}}</pre>
</div>
<script>
const app = Vue.createApp({
data() {
return {
question: 'The National Stock Exchange (NSE) is located a',
option1: 'Mumbai',
option2: ' Chennai ',
option3: 'New Delhi',
option4: 'Kolkata',
result: ''
}
},
methods: {
concatWithSpace() {
this.result = `${this.question} ${this.option1} ${this.option2} ${this.option3} ${this.option4}`;
}
}
});app.mount('#app');
</script>
Output of Vue Concat String with Space
