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

Detailed explanation of TS object spread operator and rest operator

Table of contents Overview Object rest attribute ...

Vue element implements table adding, deleting and modifying data

This article shares the specific code of vue elem...

Tutorial on how to create a comment box with emoticons using HTML and CSS

HTML comment box with emoticons. The emoticons ar...

Specific usage instructions for mysql-joins

Table of contents Join syntax: 1. InnerJOIN: (Inn...

A detailed guide to custom directives in Vue

Table of contents 1. What is a custom instruction...

MySQL database operations (create, select, delete)

MySQL Create Database After logging into the MySQ...

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

1. First, the pure HTML file must have an entry i...

Summary of common commands for building ZooKeeper3.4 middleware under centos7

1. Download and decompress 1. Introduction to Zoo...

Solution to the VMware virtual machine prompt that the exclusive lock of this configuration file failed

After VMware is abnormally shut down, it prompts ...

Detailed explanation of the use of mysql explain (analysis index)

EXPLAIN shows how MySQL uses indexes to process s...

Detailed tutorial on how to delete Linux users using userdel command

What is serdel userdel is a low-level tool for de...

Practical record of MySQL 5.6 master-slave error reporting

1. Problem symptoms Version: MySQL 5.6, using the...

Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker

ElasticSearch cluster supports動態請求的方式and靜態配置文件to ...

How to add website icon?

The first step is to prepare an icon making softwa...

Linux /etc/network/interfaces configuration interface method

The /etc/network/interfaces file in Linux is used...