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原样输出

相关文章
|
25天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
11 2
|
JavaScript
Vue 渲染内容 v-text 与 v-html
Vue 渲染内容 v-text 与 v-html
|
JavaScript
vue快速入门(三) 之 v-text v-html
vue快速入门(三) 之 v-text v-html
111 0
|
JavaScript 开发者
讲解 v-cloak、v-text、v-html 的基本使用|学习笔记
快速学习讲解 v-cloak、v-text、v-html 的基本使用
138 0
讲解 v-cloak、v-text、v-html 的基本使用|学习笔记
|
JavaScript 开发者
讲解v-cloak、v-text、v-html的基本使用|学习笔记
快速学习讲解v-cloak、v-text、v-html的基本使用
117 0
讲解v-cloak、v-text、v-html的基本使用|学习笔记
|
JavaScript
vue再读12-指令v-text和v-html
vue再读12-指令v-text和v-html
78 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
171 0

热门文章

最新文章

下一篇
无影云桌面