Detailed explanation of the differences and applications of {{}}, v-text and v-html in Vue

Detailed explanation of the differences and applications of {{}}, v-text and v-html in Vue
  • { {}} Get the value, the original content of the tag will not be cleared
  • v-text gets the value, which will clear the original content of the tag and output plain text
  • v-html gets the value and clears the original content of the tag. If the data contains html tags, it will be parsed and output as html tags
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <p>Good morning {{info}}</p>
    <p v-text="info">Good morning</p>
    <p v-html="info">Good morning</p>
    <hr>
    <p v-text="addr">hhh</p>
    <p v-html="addr">hhh</p>
    <hr>
    <p v-text="addr2">hhh</p>
    <p v-html="addr2">hhh</p>
</div>

</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            info:"good",
            addr:"<a href='https://www.baidu.com'>Click to enter Baidu</a>",
            addr2:'<a href="https://www.baidu.com" rel="external nofollow" >Baidu</a>'
        }
    });
</script>

insert image description here

This is the end of this article about the differences and applications of {{}}, v-text and v-html in vue. For more relevant content about the differences and applications of {{}}, v-text and v-html in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed examples of Vue instructions: v-cloak, v-text, v-html
  • Detailed code examples of using v-text / v-html in vue
  • Vue prevents curly braces {{}} from flashing v-text and v-html, v-cloak usage examples
  • Vue learning notes: detailed explanation of v-text && v-html && v-bind
  • Vue directives v-html and v-text

<<:  Detailed explanation of building MySQL master-slave environment with Docker

>>:  Solve the problem of Navicat importing database data structure sql reporting error datetime(0)

Recommend

How to use Dayjs to calculate common dates in Vue

When using vue to develop projects, the front end...

MySQL infrastructure tutorial: detailed explanation of the query statement execution process

Preface I have always wanted to know how a SQL st...

MySQL server 5.7.20 installation and configuration method graphic tutorial

This article records the installation and configu...

jQuery implements the practice of changing the position and size of div by dragging the mouse

To achieve an effect similar to Windows forms, dr...

How to build a drag and drop plugin using vue custom directives

We all know the drag-and-drop feature of HTML5, w...

HTML multimedia application: inserting flash animation and music into web pages

1. Application of multimedia in HTML_falsh animat...

Share 13 excellent web wireframe design and production tools

When you start working on a project, it’s importa...

Install centos7 virtual machine on win10

1. Download VMware Workstation 64 version https:/...

How to insert 10 million records into a MySQL database table in 88 seconds

The database I use is MySQL database version 5.7 ...

Analysis of the cutting of the background image of the nine-square grid with adaptive width and height

<br />Based on the original width-and-height...

Summary of Form Design Techniques in Web Design

“Inputs should be divided into logical groups so ...

Several ways to solve the 1px border problem on mobile devices (5 methods)

This article introduces 5 ways to solve the 1px b...

The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.

Today I got familiar with the mouse zooming effect...

Use of MySQL SHOW STATUS statement

To do MySQL performance adjustment and service st...

Summary of various forms of applying CSS styles in web pages

1. Inline style, placed in <body></body&g...