[转]vue项目中 指令 v-html 中使用过滤器filters功能
2023-09-11 14:16:15 时间
转载于简书
链接:http://www.jianshu.com/p/29b7eaabd1ba
问题
2.0 filters only work in mustache tags and v-bind.
Vue2.0 不再支持在 v-html
中使用过滤器,比如在 1.0 中是这样使用的:
{{{ option.title | highlight }}}
然而,现在不能使用了,Vue2.0 的过滤器现在只能应用在 {{ }}
和 v-bind
中。
然而,嫌麻烦,还想使用怎么办?
解决方法
- 使用全局方法
- 使用 computed 属性
- 使用 $options.filters
使用全局方法
put your
highlight
into methods, andv-html="highlight(option.title)"
可以在 Vue 上定义全局方法:
Vue.prototype.highlight= function (sTitle) {
// to do
};
然后所有组件上都可以直接用这个方法了:
v-html="highlight(option.title)"
使用 computed 属性
- What if I have a filter that outputs HTML? Do I have to use a computed property or is there a better way?
- Computed properties are the best way. You get automatic caching.
当然,可以使用计算属性 computed
,返回原生 html
给 v-html
即可。
使用 $options.filters
You can use $options.filters
v-html="$options.filters.highlight(option.title)".
这个方式在文档中并没有说明,但是这也是可靠的方法。
You can safely rely on that: $options are the options passed to the Vue constructor when creating a vm (so any component or new Vue). From that point on is just javascript
相关文章
- 从0搭建vue后台管理项目到颈椎病康复指南(一)
- vue和微信小程序的区别、比较
- 使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
- VUE - 配置跨域
- 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details
- vue-cli3.0 脚手架搭建项目的过程详解
- [Vue @Component] Load Vue Async Components
- vue.js3: 给滑动滚动添加上惯性(vue@3.2.26)
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3: 项目打包后部署到网站子目录(vue@3.2.33)
- vue.js 3.2.20:拖动创建div及移动、缩放、删除等操作
- vue 导航守卫与 jq 导航拦截器的介绍
- vue 项目 打印, 要求 只打印div里面的内容
- 移动端h5网页、微信网页调试之利用vConsole真机调试+显示控制台打印信息、调试接口(附带vue项目里的具体使用方法)
- Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片:前端下载利器FileSaver
- vue项目该不该使用eslint验证?
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
- vue element-ui 分页组件封装
- Vue项目通过scrollIntoView实现锚点点击页面平滑滚动
- 计算机毕设 SSM Vue的家教应聘招聘管理系统(含源码+论文)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 108:vue+openlayers实现多个图形的合并、交叉、差集等( 示例代码 )
- Vue(八)vue 脚手架、脚手架创建项目示例
- vue大屏项目封装echarts
- vue项目实现监听移动端的物理返回键效果demo(整理)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue:第一个vue-cli项目