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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。