4. Vue |
您所在的位置：网站首页 › vue里面的v-html › 4. Vue |
4. Vue
|
前面的篇章Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题，那么这里面也介绍了插值表达式的使用。 基本使用方式插值表达式 {{ msg }}v-text v-html 区别1：插值表达式存在网络延迟问题，而v-text 、v-html不存在该问题。 Title{{ msg }} // 2. 创建一个Vue的实例 var vm = new Vue({ el: '#app', data: { msg: 'Hello world,Vue!' } })
区别2：插值表达式可以增加其他字符串内容，v-text、v-html只能根据data设置的内容渲染元素。
从上面的示例可以看到插值表达式、v-text、v-html都可以渲染数据，那么为什么需要提供三种方式呢？ 主要的原因是插值表达式可以拼接html元素的内容，而v-text和v-html只能将提供的数据渲染到html元素中，覆盖html内已有的内容信息。 示例如下： 
浏览器显示： 
可以看到只有插值表达式显示html元素内增加的字符串。v-text和v-html都会将html元素内的信息进行覆盖。 所以，如果当需要写一定字符串显示，这时候就应该使用插值表达式了。 区别3：插值表单式和v-text都会转义，v-html则可以渲染html元素
将需要渲染的信息设置为h1标签，下面来看看渲染的效果，如下： 
|
【本文地址】
今日新闻 |
推荐新闻 |