Vue.Js String newline Character


Sometimes we need to add newline characters to the vue.js string. We can add newline character same as plain JavaScript. Here in this tutorial, we are going to explain how you can use newline character in Vue.js.


Vue.Js String newline Character Example

You can add newline character in vue.js simply as below-

Example:

<div id="app">	
	<p style="white-space:pre-wrap;">{{myStr}}</p>
</div>
<script>
 new Vue({
el: '#app',
  
  data: { 
	  myStr:"Hello World! \n Welcome to Tutorialsplane.com!"
  }

});
</script>     

Try it »

As you can see to add newline character we have added “\n”. Make sure you add the css style=”white-space:pre-wrap;” to paragraph or div container.

Output of above example-

Vue.Js String newline Character

Advertisements

Add Comment

📖 Read More