How to add a new line in string in VueJS?
June 27, 2022Hi Friends 👋,
Welcome To SortoutCode! ❤️
Today I am going to show you How do you add a new line in string in VueJS.
Table of contains
- Define str1,str2,msg1,msg2 for test
- Using the pre tag
- Using the br tag
- Using the textarea tag
- Using the white-space:pre; style
Let’s start today’s tutorial How do I add a new line in string in VueJS?
Define str1,str2,msg1,msg2 for test
Let’s define the number in data of the FirstComponent.vue
component for testing purposes.
FirstComponent.vue
<script>
export default {
name: 'FirstComponent',
data() {
return{
str1 : "Hi Friends",
str2 : "Welcome To SortoutCode!",
msg1: '',
msg2:'Hi Friends \n Welcome To SortoutCode!'
}
},
}
</script>
Data is used to define properties in a particular component. In a single-file component, data()
is a function that returns a set of properties that have been described in the function.
we define the str1,str2,msg1,msg2 properties you can see that.
Using the pre tag
We will use the newline character, \n
, which is used in javascript and many other languages. For adding the new in your string or character we have to use \n
before that string or character. It will break the line and add a new line to a string.
FirstComponent.vue
<template>
<div>
<p>{{ msg2 }}</p>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
msg2:'Hi Friends \n Welcome To SortoutCode!'
}
},
}
</script>
For now, let’s check the output.
Output
Using the br tag
We can use the old method for the new line using the <br/>
tag. <br/>
tag will insert a single line break. we can use the two different strings and using the br tag add the new line in the string.
let’s see the example:
FirstComponent.vue
<template>
<div>
<h1>{{str1}}<br/>{{str2}}</h1>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
str1 : "Hi Friends",
str2 : "Welcome To SortoutCode!",
}
},
}
</script>
For now, let’s check the output.
Output
Using the textarea tag
we can use the \n
character in between the string. To print that string we are using the Textarea input tag. In the textarea long string break and add a new line in the string.
Let’s see the example:
FirstComponent.vue
<template>
<div>
<textarea v-model="msg2"></textarea>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
msg2:'Hi Friends \nWelcome To SortoutCode!',
}
},
}
</script>
For now, let’s check the output.
Output
Using the white-space:pre; style
HTML ignores newlines unless you specify white-space:pre
or white-space: pre-line in CSS. Therefore,n we use the
\n` character in the string and use it with another HTML tag it, will not work let’s see the example, of how they worked:
FirstComponent.vue
<template>
<div>
<h2 style="white-space:pre">{{msg2}}</h2>
<h4 style="white-space:pre-line">{{msg2}}</h4>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
msg2:'Hi Friends \nWelcome To SortoutCode!',
}
},
}
</script>
For now, let’s check the output.