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

Devops海洋的渔夫

发布于 2022-01-17 09:20:42

1.7K0

发布于 2022-01-17 09:20:42

文章被收录于专栏：Devops专栏

前言

最近在赶一个项目，导致更新较慢，实在不好意思。在上一章节讲述了在 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内已有的内容信息。

示例如下：