vue指令v-html中使用过滤器filters功能
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>
实例场景分析以及应用:当后台返回的数据包含一些特殊字符需要处理时,代码如下:
vue指令v-html中使用过滤器filters功能的更多相关文章
- [转]vue项目中 指令 v-html 中使用过滤器filters功能
转载于简书 链接:http://www.jianshu.com/p/29b7eaabd1ba 问题 2.0 filters only work in mustache tags and v-bind. ...
- vue项目中 指令 v-html 中使用过滤器filters功能
转载于简书 链接:http://www.jianshu.com/p/29b7eaabd1ba 问题 2.0 filters only work in mustache tags and v-bind. ...
- vue从入门到进阶:过滤器filters(五)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- Vue基础-在模板中使用过滤器
Vue 测试版本:Vue.js v2.5.13 官网给了过滤器的两种使用方式: 1.你可以在一个组件的选项中定义本地的过滤器: 结合实例,我给两个代码: <div id="app&qu ...
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- ubuntu18.04下取消中键复制粘贴功能
Q: armlinux开发,主机采用ubuntu18.04操作系统,使用过程中关于鼠标中键有如下操作现象, 操作: 1.选中文本, 2.将鼠标光标定位到要插入的位置 3.按下鼠标中键 现象:将自动复制 ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- Vue教程:过滤器filters(五)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
随机推荐
- Why you should use async tasks in .NET 4.5 and Entity Framework 6
Improve response times and handle more users with parallel processing Building a web application usi ...
- Async Performance: Understanding the Costs of Async and Await
Stephen Toub Download the Code Sample Asynchronous programming has long been the realm of only the m ...
- (转)java 中unsigned类型的转换
转自:http://blog.sina.com.cn/s/blog_77bf45a90101dld9.html 在Java中,不存在Unsigned无符号数据类型,但可以轻而易举的完成Unsigned ...
- ORA-00257:archiver error问题处理方法
原文链接:http://www.7747.net/database/201109/104615.html ORA-00257: archiver error. Connect internal onl ...
- RDP 数据库简介
在扩增子数据分析中,有时会发现多个OTU 注释到了同一个species , 为什么会出现这种情况呢? 首先既然在OTU水平能分开,说明序列的相似度小于97%, 同一个物种的同一个基因的片段相似度会 ...
- hosts 不启作用的解决办法
查各种编码ANSI flushdns无用 停止DNS Client 服务 0.0
- Android APK代码混淆与资源混淆详解,你确定不看?
APK的混淆分为资源混淆与代码混淆.一般大部分都使用两者结合.尤其是目前主流的应用. 其中的优点: 防止被恶意破解逆向分析 减少apk体积,也是瘦身的方法 代码可阅读性降低 其中的缺点: 调试不方便( ...
- 阿里云服务器tomcat ./shutdown.sh关闭命令报错Could not contact localhost:8005. Tomcat may not be running.
JDK1.8运行./shutdown 停止tomcat报错: 昨天购买了一个阿里云服务器,由于时间问题今天才来启动tomcat,启动的时候才发现跟我以前使用的服务器不太一样,去网上搜索了半天以为是to ...
- Spark RDD Transformation 简单用例(一)
map(func) /** * Return a new RDD by applying a function to all elements of this RDD. */ def map[U: C ...
- python使用selenium安装chromedriver的问题
环境 win64位,python3.6, 问题与解决 说来也巧,今天无意中解决了两个多月前的问题,即用selenium调用chrome浏览器报错的问题:起因是在知乎中看到了一篇12306抢票的文章,用 ...