v-text 和v-html

简介: v-text 和v-html

接下来,我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。

使用方法  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p v-text="msg"></p>
      <p v-html="msg"></p>
      <p>{{msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue",
        },
      });
    </script>
  </body>
</html>
 

变成这样

v-text和v-html起了插值表达式{{}}作用,将msg中的信息显示在视图中。那它们之间有什么不同?请看下面代码

我们可以清晰的知道,在v-html的运行中,它解析了HTML代码。而v-text并没有解析,它将msg原样输出

相关文章
04-Vue之本地应用v-text/v-html指令
04-Vue之本地应用v-text/v-html指令
|
11月前
|
JavaScript
Vue 渲染内容 v-text 与 v-html
Vue 渲染内容 v-text 与 v-html
|
11月前
|
JavaScript
vue快速入门(三) 之 v-text v-html
vue快速入门(三) 之 v-text v-html
|
JavaScript 开发者
讲解 v-cloak、v-text、v-html 的基本使用|学习笔记
快速学习讲解 v-cloak、v-text、v-html 的基本使用
113 0
讲解 v-cloak、v-text、v-html 的基本使用|学习笔记
|
JavaScript 开发者
讲解v-cloak、v-text、v-html的基本使用|学习笔记
快速学习讲解v-cloak、v-text、v-html的基本使用
96 0
讲解v-cloak、v-text、v-html的基本使用|学习笔记
|
JavaScript
vue再读12-指令v-text和v-html
vue再读12-指令v-text和v-html
63 0
vue再读12-指令v-text和v-html
|
JavaScript
讲解v-cloak、v-text、v-html的基本使用
一、Vue之-基本的代码结构和插值表达式、v-cloak 二、Vue指令之 v-text 三、Vue指令之 v-html
讲解v-cloak、v-text、v-html的基本使用
|
JavaScript 前端开发
v-text和v-html
v-text和v-html
146 0
|
4天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js