vue2.0版本中v-html中过滤器的使用
2024-08-31 22:42:34
Vue 2.0 不再支持在 v-html 中使用过滤器
解决方法:
1:全局方法(推荐)
2:computed 属性
3:$options.filters(推荐)
1:使用全局方法:
可以在 Vue 上定义全局方法:
Vue.prototype.msg = function(msg){ return msg.replace("\n","<br>") };
然后所有地方上都可以直接用这个方法了:
<div v-html="msg(content)"></div>
2:computed 属性
var appMain = new Vue({ data:{ content:"XXX" }, el:"#appMain", computed:{ content:function(msg){ return msg.replace("\n","<br>") } } })
页面上:
<div>{{content}}</div>
3:$options.filters:
在定义的vue里的filter添加方法:
var appMain = new Vue({ el:"#appMain", filters:{ msg:function(msg){ return msg.replace(/\n/g,"<br>") } }, data:{ content:"XXXX" } })
然后页面上都可以直接用这个方法了:
<div id="appMain"> <div v-html="$options.filters.msg(content)"></div> </div>
参考:https://www.cnblogs.com/rxqlx/p/10330517.html
最新文章
- 关于List泛型的强制转换
- [分享&#183;JavaScript]提取Table中的内容到XML对象
- 网页JavaScript1
- sublime Text 正则替换
- python defaultdict模块
- ASP.NET Core 搭配 Nginx 的真实IP问题
- ubuntu 上安装node.js 的简单方法
- 把spring boot发布成window Service
- HDU 2048:神、上帝以及老天爷(错排公式,递推)
- Docker的常用命令
- 虚拟机压力测试延迟高的可能原因及 ILPIP 配置 / 查询脚本
- USB集线器基础知识
- Material Design系列第二篇——Getting Started
- POJ 2251 bfs
- gulp4.0 前端构建脚手架
- 内核加载模块时提示usb_common: exports duplicate symbol of_usb_get_dr_mode
- 【Python】使用Pytest集成Allure生成漂亮的图形测试报告
- Spark配置参数的三种方式
- C/C++之回调函数
- C#多枚举值的写法与读法
热门文章
- Nuxt + Vue 全家桶
- Macbook Pro 键盘触摸板失灵,只有电源键有反应 修复手札
- html在div中显示滚动条
- html5 input number类型使用整理
- css3中的盒子模型
- 解决:Could not load type &#39;System.ServiceModel.Activation.HttpModule&#39; from assembly &#39;System.ServiceMode
- 在easyui-tabs中的href或 content的多种条件下的不同页面内容和页面地址的赋值?
- bootstrap Tab页切换
- ES6 - 数组扩展(扩展运算符)
- 图片验证码识别:ModuleNotFoundError: No module named &#39;ShowapiRequest&#39;