3. Vue 模板渲染：插值表达式、v-text、v-html的基本使用

小半 • 2022年9月26日下午8:31 • 前端开发 • 阅读 257

前言

最近在赶一个项目，导致更新较慢，实在不好意思。在上一章节讲述了在 Vue 中如果解决网络延迟的问题。

本章节再来讲述「Vue模板渲染」的基础功能。

这个基础功能在前端框架可是很重要的功能，不单单「Vue框架」有此功能，在Django框架等后台都有「模板渲染」的功能，而且写法基本上也是差不多。

那么这个「模板渲染」是干啥的？简单来说就是将「后端查询出来的数据」填充到「前端HTML文件对应的位置」上。

当然，不同类型的字符串或者数据类型，就可能需要用不同的「渲染方式」，这就早就vue框架中有各种不同的渲染方式。

本章节的渲染方式介绍：

插值表达式
v-text
v-html

以下是基本使用方式

基本使用方式

「插值表达式」

{{ msg }}

「v-text」

<div v-text="msg"></div>

「v-html」

<div v-html="msg"></div>

区别1：插值表达式存在网络延迟问题，而v-text 、v-html不存在该问题。

对于插值表达式的网络延迟问题，上一章节使用 v-cloak 控制样式即可解决。

下面的示例来看看三者的区别表现。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->    <div id="app">        <!-- 使用插值表达式渲染数据 -->        <p>{{ msg }}</p>
        <!-- 使用v-text渲染数据 -->        <div v-text="msg"></div>
        <!-- 使用v-html渲染数据 -->        <div v-html="msg"></div>
    </div>
    <!--  1.导入vue.js库  -->    <script src="lib/vue.js"></script>
    <script>        // 2. 创建一个Vue的实例        var vm = new Vue({            el: '#app',            data: {                msg: 'Hello world,Vue!'            }        })</script>
</body></html>

区别2：插值表达式可以增加其他字符串内容，v-text、v-html只能根据data设置的内容渲染元素。

从上面的示例可以看到「插值表达式」、「v-text」、「v-html」都可以渲染数据，那么为什么需要提供三种方式呢？主要的原因是「插值表达式」可以拼接html元素的内容，而「v-text」和「v-html」只能将提供的数据渲染到html元素中，覆盖html内已有的内容信息。

示例如下：