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

Rhit efficient visualization Nginx log viewing tool

Table of contents Introduction Install Display Fi...

Linux firewall iptables detailed introduction, configuration method and case

1.1 Introduction to iptables firewall Netfilter/I...

UCenter Home site adds statistics code

UCenter Home is an SNS website building system rel...

Implementation of nginx virtual host settings based on domain name, port, and different IP

1. Setting up nginx virtual host With virtual hos...

How to show or hide common icons on the desktop in Windows Server 2012

Windows Server 2012 and Windows Server 2008 diffe...

mysql show simple operation example

This article describes the mysql show operation w...

Example of creating a virtual host based on Apache port

apache: create virtual host based on port Take cr...

A brief introduction to bionic design in Internet web design

When it comes to bionic design, many people will t...

Use of Linux stat command

1. Command Introduction The stat command is used ...

Share the 15 best HTML/CSS design and development frameworks

Professional web design is complex and time-consu...

Analysis of Alibaba Cloud CentOS7 server nginx configuration and FAQs

Preface: This article refers to jackyzm's blo...

WeChat Mini Program user authorization to obtain mobile phone number (getPhoneNumber)

Preface The mini program has a very convenient AP...

Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV

Since the introduction of the contentEditable attr...

Sample code for partitioning and formatting a disk larger than 20TB on centos6

1. Server environment configuration: 1. Check dis...

CSS automatically intercepts the specified length string and displays the end... Support FF browser

<style type="text/css"> Copy code ...