vue指令v-html中使用过滤器filters功能
2024-10-20 03:41:12
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>
实例场景分析以及应用：当后台返回的数据包含一些特殊字符需要处理时，代码如下：
最新文章
- delphi tidhttp 超时设置无效的解决方法
- RDD/Dataset/DataFrame互转
- 使用dnsmasq来提升CentOS上网速度
- Sphinx 之 Coreseek、Sphinx-for-chinaese、Sphinx+Scws 评测
- c语言-交换两个整数
- Strust2最基本使用
- c#求slope线性回归斜率
- Installshield更新时，新加dll未拷贝至安装目录问题完美解决【原创】
- codevs 1733 聪明的打字员 （Bfs）
- css3仿山猫侧边栏
- 简单2步实现 asp.net mvc ckeditor 图片上传
- Delphi中解析Xml的控件-SimDesign NativeXml
- 初学Python（四）——set
- 调用bios喇叭发声
- C# ListView 控件和 INotifyPropertyChanged 接口
- Python Redis中Scan遇到问题
- ARCGIS做好的模型工具，已经设置为相对路径，拷贝后工具显示叉叉不可用的原因
- [Unity工具]批量修改字体
- java数据结构之树
- C#.NET常见问题(FAQ)-如何让控件或者窗体本身全屏