4. Vue - 插值表达式、v-text、v-html的基本使用

前面的篇章Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题,那么这里面也介绍了插值表达式的使用。

基本使用方式

插值表达式

{{ msg }}

v-text

v-html

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




    
    Title


    
    

{{ msg }}

4. Vue - 插值表达式、v-text、v-html的基本使用_第1张图片

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

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

示例如下:

4. Vue - 插值表达式、v-text、v-html的基本使用_第2张图片

浏览器显示:

4. Vue - 插值表达式、v-text、v-html的基本使用_第3张图片

可以看到只有插值表达式显示html元素内增加的字符串。v-textv-html都会将html元素内的信息进行覆盖。

所以,如果当需要写一定字符串显示,这时候就应该使用插值表达式了。

区别3:插值表单式和v-text都会转义,v-html则可以渲染html元素

4. Vue - 插值表达式、v-text、v-html的基本使用_第4张图片

将需要渲染的信息设置为h1标签,下面来看看渲染的效果,如下:

4. Vue - 插值表达式、v-text、v-html的基本使用_第5张图片
13423234-0e3934319aa622f6.png

你可能感兴趣的:(4. Vue - 插值表达式、v-text、v-html的基本使用)