• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程06:绑定文本指令v-text和绑定HTML指令v-html

    vue开发教程06:绑定文本指令v-text和绑定HTML指令v-html

    作者: 分类:vue开发 点击: 160 次
    wordpress CMS主题:ssmay主题

      本章再来介绍2个数据绑定指令:文本绑定指令v-text和html数据绑定指令v-html。它们都是文本绑定指令,不同之处是:v-text会把文本中的html标签输出而不解析,而v-html可以解析html标签。

      1:v-text文本指令。

      其实,v-text文本指令实现的效果跟上一章中介绍的 {{}} 实现的效果是一样的,所以,一般使用的比较少。案例如下:

      msg:"这里是v-text指令"

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

      2:v-html文本指令。

      如果是绑定普通纯文本,与v-text指令的效果一样。而如果是要绑定html文本代码,v-text会直接在页面输出html标签,这就不是我们所想要的了。这时,v-html指令就派上用场了,它可以解析html标签不输出,而只是输出纯文本内容。

      如:

      return{
      h2:'<h2>高时银博客</h2>'
      }

      如果用普通的绑定数据,会把html标签也显示出来。

      {{h2}}   或    <div v-text="h2"></div>

      显示结果:

      <h2>高时银博客</h2>

      使用v-html绑定html数据:

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

      能正常解析h2标签,显示结果如下图:

      vue开发教程06:绑定文本指令v-text和绑定HTML指令v-html

      文本绑定指令就介绍到这里,想对v-text指令和v-html指令有更深的了解,可以上vue官方文档。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809206945.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.