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. 【luoguP4720】【模板】扩展卢卡斯

    快速阶乘与(扩展)卢卡斯定理 \(p\)为质数时 考虑 \(n!~mod~p\) 的性质 当\(n>>p\)时,不妨将\(n!\)中的因子\(p\)提出来 \(n!\) 可以写成 \(a* ...

  2. LSTM代码

    tensorflow的关于LSTM的代码,经过反复的调试和修改,终于运行成功了,可以把训练过程的结果保存起来,然后预测的时候直接取出来.花了很长时间才把官网上的代码调试成功,里面的坑有很多需要填补,还 ...

  3. Foxmail: 错误信息::ssl连接错误, errorCode: 5,各种解决方案的大杂烩。

    1.  收件数据过多,删除部分邮件可解决 我尝试失败,在foxmail把收件箱全部删完了没解决. 2.  网上最常见的解决方法 https://help.foxmail.com/cgi-bin/hel ...

  4. exception java.lang.IndexOutOfBoundsException: Index: 0, Size: 0

      1.情景展示 Java 报错信息如下: java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 2.原因分析 首先,这是越界异常,但不是数组越 ...

  5. python gaussian,gaussian2

    import numpy as np import matplotlib.pyplot as plt import mpl_toolkits.axisartist as axisartist from ...

  6. MyBatis(八):Mybatis Java API枚举类型转化的用法

    最近工作中用到了mybatis的Java API方式进行开发,顺便也整理下该功能的用法,接下来会针对基本部分进行学习: 1)Java API处理一对多.多对一的用法: 2)增.删.改.查的用法: 3) ...

  7. ubuntu iptables重启生效:

    ubuntu iptables重启生效:save roles to a file:iptables-save >/etc/iptables.roles edit /etc/network/int ...

  8. 自己写的一个 CGBLIB 动态代理【原创】

    CGLIB代理类,用CGLIB来实现一个代理类.大致原理描述如下: 1.使用Enhancer类来生成一个继续于被代理类的子类,此子类会重写被代理类(父类)中所有的非final的public方法: 2. ...

  9. linux删除文件的前n行

    需求描述: 今天看了一个系统的临时文件,有5.6G的大小,这个文件也没有用了,想要将大部分的文件都删除掉. 在此记录下删除的过程.删除前n行的记录. 操作过程: 对于数据量比较大的情况(本例5800万 ...

  10. Nginx返回固定json或者文本格式的方法

    在系统还没有做集群的情况下,直接重启项目时刚好用户在使用的话,一般都会受到投诉,那么使用nginx返回类似“系统维护”的提示信息并且提前在应用上面做通知才是合适的做法 那么记录一下nginx里面的配置 ...