您现在所在位置: 首页 > IT知识库

Vue精讲系列第2期:Vue.js之文本渲染

发布时间:2022-01-12点击数:

      各位童鞋,今天我们继续讲Vue系列课程,今天的内容是Vue的文本渲染。

      Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

      在前面,我们一直使用的是字符串差值的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式:

v-text:更新元素的innerText

v-html:更新元素的innerHTML

v-once:静态插值

v-pre:原格式输出

v-cloak:指令保持在元素上直到关联实例结束编译


         

      在Vue中,可以使用{{}}将数据插入相应的模板,这种方法是一种文本插值。使用这种方法,如果网络慢或JavaScript出错,都会将{{}}直接渲染到页面中。

      庆幸的是,Vue还提供了v-text和v-html来渲染文本或元素。

      其中v-text和{{}}类似,只是用来渲染文本内容,而v-html和innerHTML非常相类,可以将HTML元素渲染;而v-once这个指令,只能执行一次,所以当数据改变时,插值处的内容不会更新,所以称为静态插值;至于v-cloak之歌指令,经常和css规则一起使用,可以用来隐藏为编译的插值直到实例编译结束。在上例,若不设置v-cloak样式为隐藏,则会在结束编译前,一直显示为{{message5}};最后就是v-pre,这个指令可以在模板中跳过vue编译,直接输出原始值,也就是不会再输出vue中的data值了,而是直接显示{{message4}}。


  • 友情链接

关注东软睿道公众号了解更多IT行业资讯

添加东小萌微信
获取更多IT学习资源