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

MySQL process control IF(), IFNULL(), NULLIF(), ISNULL() functions

In MySQL, you can use IF(), IFNULL(), NULLIF(), a...

html page!--[if IE]...![endif]--Detailed introduction to usage

Copy code The code is as follows: <!--[if IE]&...

How to create and run a Django project in Ubuntu 16.04 under Python 3

Step 1: Create a Django project Open the terminal...

Summary of Problems in Installation and Usage of MySQL 5.7.19 Winx64 ZIP Archive

Today I learned to install MySQL, and some proble...

Detailed explanation of jQuery method attributes

Table of contents 1. Introduction to jQuery 2. jQ...

Some pitfalls of JavaScript deep copy

Preface When I went to an interview at a company ...

Detailed explanation of the knowledge points of using TEXT/BLOB types in MySQL

1. The difference between TEXT and BLOB The only ...

An example of the calculation function calc in CSS in website layout

calc is a function in CSS that is used to calcula...

Solution to Element-ui upload file upload restriction

question Adding the type of uploaded file in acce...

Detailed explanation of the background-position percentage principle

When I was helping someone adjust the code today,...

Vue mobile terminal realizes the whole process of left sliding editing and deletion

Preface According to the project needs, Vue-touch...

Vue keeps the user logged in (various token storage methods)

Table of contents How to set cookies Disadvantage...

Graphical explanation of the function call of proto file in Vue

1. Compile proto Create a new proto folder under ...

How to integrate the graphic verification code component into the Ant Design Pro login function

Preface: This article only introduces the steps t...

Use Vue3 for data binding and display list data

Table of contents 1. Comparison with Vue2 1. New ...