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. 第02组 Alpha冲刺(4/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  2. SpringCloud:搭建基于Gateway的微服务网关(一)

    1.需求 最近在尝试着写一个开放平台,于是先搭建网关. 作用:统一的请求入口,完成对请求的跟踪,限流(未做),鉴权,分发,封装响应 2.工作原理 2.1.请求 在开放平台中申请对接口的使用,申请通过后 ...

  3. SQL Mode

    SQL Mode简介 在MySQL中,SQL Mode常常用来解决以下问题: 1.通过设置SQL Mode,可以完成不同严格程度的数据校验,有效保证数据准确性. 2.通过设置SQL Mode为ANSI ...

  4. Pytorch中ndarray tensor list互转

    1.ndarray->tensor : b=torch.from_numpy(a) 2.tensor->ndarray: b=a.numpy() ''' 但这么写会报错-- Runtime ...

  5. activeMQ 的启动 停止 查看状态

    1 启动 : 进入到activeMQ 的 bin 目录,执行   ./activemq start  开启 ,如下: 2  查看activeMQ 是不是启动的状态, ./activemq  statu ...

  6. python 五星红旗

    import turtle turtle.setup(600,400,0,0) turtle.bgcolor("red") turtle.fillcolor("yello ...

  7. Sword 哈希表

    哈希表 哈希表是一种典型的以空间换取时间的数据结构,在没有冲突的情况下,对任意元素的插入.索引.删除的时间复杂度都是O().这样优秀的时间复杂度是通过将元素的key值以hash方法f映射到哈希表中的某 ...

  8. 解决StrToDateTime()不是有效日期类型的问题

    方法一: function GetDateFormat():string; var SysFrset: TFormatSettings; begin Result:=''; GetLocaleForm ...

  9. [Golang] mynats(对nats.go的二次封装)

    0x0 前言 最近项目开始使用nats作为消息中间件. nats的引入确实解决项目很多痛点. 比如: 1)服务动态横向扩展 2)负载均衡(nats的均衡机制只有随机,不过对我们来说也够用了) 3)多服 ...

  10. flash逆向练习:以逆向的方式通关flash游戏《谈判专家》

    一.缘起 无聊想玩搜个游戏玩,看到一个帖子引起了我的好奇: 但是作者分享的游戏链接已经挂掉了,于是就搜索了一下: 选了7k7k上的一个在线玩,链接:http://www.7k7k.com/swf/15 ...