vue指令v-html使用过滤器filters功能实例
问题
2.0filtersonlyworkinmustachetagsandv-bind.
Vue2.0不再支持在v-html中使用过滤器,比如在1.0中是这样使用的:
{{{option.title|highlight}}}
然而,现在不能使用了,Vue2.0的过滤器现在只能应用在{{}}和v-bind中。
然而,嫌麻烦,还想使用怎么办?
解决方法
- 使用全局方法
- 使用computed属性
- 使用$options.filters
使用全局方法
putyourhighlightintomethods,andv-html="highlight(option.title)"
可以在Vue上定义全局方法:
Vue.prototype.highlight=function(sTitle){ //todo };
然后所有组件上都可以直接用这个方法了:
v-html="highlight(option.title)"
使用computed属性
- WhatifIhaveafilterthatoutputsHTML?DoIhavetouseacomputedpropertyoristhereabetterway?
- Computedpropertiesarethebestway.Yougetautomaticcaching.
当然,可以使用计算属性computed,返回原生html给v-html即可。
使用$options.filters
Youcanuse$options.filters
v-html="$options.filters.highlight(option.title)".
这个方式在文档中并没有说明,但是这也是可靠的方法。
Youcansafelyrelyonthat:$optionsaretheoptionspassedtotheVueconstructorwhencreatingavm(soanycomponentornewVue).Fromthatpointonisjustjavascript
以上就是本次介绍的关于vue指令v-html使用的全部知识点,感谢大家的阅读和对毛票票的支持。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。