VueJs V-text

v-text works just like {{}} interpolation. <div v-text="content"></div> renders the same output as <div>{{ content }}</div>.

when you pass HTML markup to v-text. It appears that v-text encodes HTML entities such as < and >.

Below the #Example 1

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
	     <div v-text="content"></div>
     </div>
     <script>
     new Vue ({
        	el: '#app',
		data: {
		        content: 'Hello World'
		}
             })
   </script>
 </body>
</html>

Output

Below the #Example 2

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app1">
	     <div>{{ content }}</div>
     </div>
     <script>
     new Vue ({
        	el: '#app1',
		data: {
		        content: 'Hello World'
		}
             })
   </script>
 </body>
</html>

Output

Below the #Example 3

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app2">
	     <div v-text="content"></div>
     </div>
     <script>
     new Vue ({
        	el: '#app2',
		data: {
		        content: '<h3<Hello World</h3>'
		}
             })
   </script>
 </body>
</html>

In above example, v-text did not render the h3 tag. if you want to render the h3 tag, you should use v-html directive instead of v-text directive.

Output

PreviousVueJs - Introduction

VueJs v-htmlNext