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

vue2.0版本中v-html中过滤器的使用的更多相关文章

  1. 注册asp.net 4.0版本到IIS服务器中

    在IIS服务器的运维的过程中,有时候部署asp.net网站发现未安装.net framework对应版本信息,此时就需要重新将.net framework对应的版本注册到IIS中,此处以重新注册.ne ...

  2. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  3. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  4. 国产计算框架Mindspore1.3.0 gpu源代码中的cmake文件存在问题(bug),openmpi的url错误,导致不能正常编译——成功解决mindspore-gpu-1.3.0版本不能从源代码中编译的问题

    mindspore 的 r1.3 分支 在gpu方式编译下存在问题,无法编译,具体编译结果参考: https://www.cnblogs.com/devilmaycry812839668/p/1505 ...

  5. vue2.0版本指令v-if与v-show的区别

    v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载. v-show:调整css dispaly属性,可以使客户端操作更加流畅. v-if示例: <!DOCTYPE html> & ...

  6. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  7. [转]vue项目中 指令 v-html 中使用过滤器filters功能

    转载于简书 链接:http://www.jianshu.com/p/29b7eaabd1ba 问题 2.0 filters only work in mustache tags and v-bind. ...

  8. vue项目中 指令 v-html 中使用过滤器filters功能

    转载于简书 链接:http://www.jianshu.com/p/29b7eaabd1ba 问题 2.0 filters only work in mustache tags and v-bind. ...

  9. vue2.0自学教程(一):走进vue2.0大观园

    人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vuevue是一个前端框架,使用MVVM(Mode ...

随机推荐

  1. 【cf比赛记录】Codeforces Round #601 (Div. 2)

    Codeforces Round #601 (Div. 2) ---- 比赛传送门 周二晚因为身体不适鸽了,补题补题 A // http://codeforces.com/contest/1255/p ...

  2. 本地局域网yum源搭建-centos/redhat

    环境-centos6.7  [本机yum搭建提前备好,不做介绍] [root@nagios ~]# cat /etc/redhat-release CentOS release 6.7 (Final) ...

  3. 如何保证MQ的顺序性?比如Kafka

    三.如何保证消息的顺序性 1. rabbitmq 拆分多个queue,每个queue一个consumer,就是多一些queue而已,确实是麻烦点:或者就一个queue但是对应一个consumer,然后 ...

  4. hdu1276士兵队列训练问题[简单STL list]

    目录 题目地址 题干 代码和解释 题目地址 hdu1276 题干 代码和解释 本题使用了STL中的list,STL的list是双向链表.它的内存空间不必连续,通过指针来进行数据的访问,高效率地在任意地 ...

  5. 范仁义html+css课程---9、video、audio、canvas和svg元素略讲

    范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...

  6. js Map的使用

    setExpenseAndAmountSum: function() { var detailList = vehicleVueObj.vehicleData; var expenseAmountSu ...

  7. Excel自动语音点名-视频教学

    请看2019年9月5日发布的第一篇推文. 标题:Excel自动语音点名-视频教学. 如果是笔记本的话, 要连接音频线进行扩音. 效果非常好. 测试了下, 11个人, 用了27秒. 可以休息下喉咙啦.. ...

  8. 强烈建议为你的Android项目加上 largeHeap 属性

    小内存机器使用“微信”时,看视频经常崩溃(out of memory) ,小内存机器有时候明明内存还很多,却还是抛出“内存不够”,应该就是每个APP能用“堆大小”的限制. 如上图,Android项目的 ...

  9. JVM线程状态Running、Sleeping、Wait、Park、Monitor

    1,使用JVisualVM时,打开Threads监控,我们可以发现Java的线程状态有以下几种: 2,JVM线程状态: NEW, RUNNABLE, BLOCKED, WAITING, TIMED_W ...

  10. 【C++】C++中重载运算符和类型转换

    输入输出运算符 输入输出运算符 输入输出运算符 算术和关系运算符 相等运算符 关系运算符 赋值运算符 复合赋值运算符 下标运算符 递增和递减运算符 成员访问运算符 函数调用运算符 lambda是函数对 ...