vue指令v-html中使用过滤器filters功能

更新日期: 2019-08-28阅读: 2.3k标签: 过滤

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.fly63.com/article/detial/5580

es6 filter() 数组过滤方法总结

创建一个数组,判断数组中是否存在某个值,也可以通过上面方法过滤掉num为2的留下num为1的,去掉空数组空字符串、undefined、null

JS的filter用法

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

过滤器vue.filters的使用

写项目的时候,有一些方法我们是需要全局使用的,比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的方法,我们一般会将其封装为全局的方法;我以前是这样做的,有这么几种方式:

js数组对象过滤:filter,find,some,every

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。find() 对于空数组,函数是不会执行的。

在Vue创建及使用过滤器

与 AngularJS 类似,Vue.js 也有自己的数据转换和过滤方法,但是必须记住,过滤器并不改变原始数据,它们只改变输出并返回过滤后的数据。过滤器在很多不同的情况下都很有用,比如保持API响应尽可能干净

VUE中的filters过滤器2种用法

Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!