SoFunction
Updated on 2025-03-10

Detailed explanation of the use of v-text/v-html example code in vue

Less nonsense, the code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VueData in the instance,Events and methods</title>
</head>
  <script src="/npm/vue/dist/"></script>
<body>
  
  <div >
    <h1 v-text="number"></h1>
  </div>

  <script type="text/javascript">
    new Vue({ 
      el:"#root",
      data:{
        msg: "world",
        number:123
      }
    })
  </script>
</body>
</html>

Show 123

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VueData in the instance,Events and methods</title>
</head>
  <script src="/npm/vue/dist/"></script>
<body>
  <div >
    <h1 v-html="content"></h1>
  </div>
  <script type="text/javascript">
    new Vue({ 
      el:"#root",
      data:{
        content: "<h1>hello world</h1>",
      }
    })
  </script>
</body>
</html>

Supplement: The difference between vuejs {{}}, v-text and v-html

<div >
<p>{{message}}</p> <!-- Output：<span>Bind by double brackets</span> -->
<p v-html="html"></p> <!-- Output：htmlTags are parsed when rendering -->
<p v-text="text"></p> <!-- Output：<span>html标签在渲染的时候被源码Output</span> -->
</div>


<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>Binding through double brackets</span>",
html: "<span>html tag is parsed during rendering</span>",
text: "<span>html tag is output by source code when rendering</span>",
}
 });
&lt;/script&gt;

the difference:

{{message}}: parses the data into plain text, cannot output real html, and displays {{}} when the page is loaded, so v-html and v-text are usually used instead, and the braces may be cancelled in the future.

v-html="html": output real html

v-text="text": parses data into plain text, cannot output real html, the difference from curly braces is that {{}} is not displayed when the page is loaded

Summarize

The above is a detailed explanation of the example code of v-text/v-html in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!