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. 如何设置网站的robots.txt

    做过网站优化的朋友都知道,搜索引擎蜘蛛爬行抓取网站时首先会去访问根目录下的robots.txt文件,如果robots文件存在,则会根据robots文件内设置的规则进行爬行抓取,如果文件不存在则会顺着首 ...

  2. VxLAN原理

    VxLAN 背景介绍: 从上个世纪虚拟化技术就被提出,但由于硬件技术达不到,而没能被重视,自本世纪初硬件制造技术越来越来强,导致很多单台物理机只跑一个应用或几个应用根本无法完全使用硬件的全部性能,导致 ...

  3. Ubuntu使用小结(主要为后面部署K8s集群做基础铺垫)

    包管理 dpkg -L libxml2 #查看libxml2安装了些什么文件 dpkg -s /usr/bin/ls      #查看ls是那个包提供的 dpkg -c abc.deb #查看abc. ...

  4. JSX 简介

    JSX 简介 考虑如下变量声明: const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是HTML. 它被称为JSX ...

  5. 驱动中遍历模块,以及获取ntoskrnl.exe基址

    方法是基于PsLoadModuleList方式 驱动中遍历模块 一丶简介 简介: 进入内核了.遍历内核中使用的模块该怎么办. 其实在驱动中.我们的DriverEntry入口位置. 提供了两个参数. 一 ...

  6. YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated, as the default Loader is unsafe

    test.py import os import sys sys.path.append(])+'/lib/lib3.7') import yaml with open("default.y ...

  7. Java常见集合的默认大小及扩容机制

    在面试后台开发的过程中,集合是面试的热话题,不仅要知道各集合的区别用法,还要知道集合的扩容机制,今天我们就来谈下ArrayList 和 HashMap的默认大小以及扩容机制. 在 Java 7 中,查 ...

  8. 简单find命令的实现

    贴代码: /*实现一个简单的find命令:*//*程序思路:首先,用一个单链表将所需要的信息存储起来:其次根据所传入的参数信息,改变节点的状态(若有这个状态,证明该节点就是我们所需要的)最后将所需要的 ...

  9. python 操作es

    Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Lucene 可能是目前存在的,不论开源还是私有的,拥有最先进,高性能和全功能搜索 ...

  10. Kali填坑

    Kali填坑 由于种种原因,又又又又又安了一遍虚拟机,增强功能时又又又遇到很多问题,在这里总结一下 使用apt-get install安装文件时,资源占用.描述为:E: 无法获得锁 /var/lib/ ...