过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

局部过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!--通过filters写过滤方法-->
<script>
  new Vue({
  filters:{
    capitalize(val){  // val 是由过滤器管道符前的值
      return val;
    }
  })
</script>

定义全局过滤器

1
2
3
4
5
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

PS：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器可以串联

1
2
3
4
5
{{ message | filterA | filterB }}
<!--
  message 值先由过滤器A过滤，再由过滤器B过滤
  不会直接让最后一个过滤
-->

过滤器是JavaScript函数，因此可以接收参数

1
2
3
4
5
{{ message | filterA('arg1', arg2) }}
<!--
  这里，filterA 被定义为接收三个参数的过滤器函数。
  其中 message的值作为第一个参数，普通字符串 'arg1' 作为第二个参  数，表达式arg2的值作为第三个参数。
-->

JS高阶函数

1. filtet函数

1
2
3
4
5
6
7
8
9
10
11
/*
  filter中的回调函数有一个要求：必须返回一个boolean值
  true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
  false:当返回false时，函数内部会过滤掉这次的n
*/

const nums = [10,20,111,222,444,50,60]
let newnums = nums.filter(function(n){
  return n<100;
})
//返回是小于100的元素

2. map函数

1
2
3
4
5
const nums = [10,20,111,222,444,50,60]
let newnums = nums.map(function(n){
  return n*2;
})
//数组有几个元素执行几次，返回的元素，现在返回的两倍的值

3.reduce函数

作用：汇总元素

1
2
3
4
5
6
7
8
9
10
11
let total = newNums.reduce(function(preValue,n){
    return preValue + n
},0)

//函数有两个参数值 preValue和n
//元素过程···
//第一次 prevalue n1
//第二次 prevalue+n1 n2
//第三次 prevalue+n1+n2 n3
//第四次 prevalue+n1+n2+n3 n4
//假如只有4个元素，最后返回prevalue+n1+n2+n3+n4

Vue响应式数组方法

push、pop、shift、unshift、splice、reverse、sort 等7个数组，由Vue包裹了一层，再调用Array.原型数组方法，被Vue处理过使得它是响应式的

  1. push
1
2
push('F');//在数组尾部添加新元素'F'，并同时更新网页界面可添加多个元素
push('F','G','E');
  1. pop
1
pop();//删掉数组最后一个元素
  1. shift
1
shift();//删掉数组第一元素，与pop方法相反
  1. unshift
1
2
3
unshift('F');//在数组最前面添加新元素'F'
可添加多个元素
unshift('F','G','E')
  1. splice

作用：删除元素/插入元素/替换元素
删除元素：第一个参数开始后的位置，第二个参数删除的个数，
没有第二个参数，表示某位置后面元素全部删掉
格式：splice(2)/splice(2,2);

替换元素：splice(start,num,’new1’,’new2’,’new…’);
num为替换元素的个数，后面的元素就改成需要替换的元素
splice(2,3,’a’,’b’,’c’);第二个元素后面替换三个元素
原理：是先将元素删掉，然后再添加元素

插入元素：splice(start,0,’new1’,’new2’,’new…’);
num改为零了，表示不删掉元素，后面直接追加新元素
strat是值意思都是一样的

  1. reverse
1
2
3
作用：反转数组
reserve();
['1','2','3'] ==> ['3','2','1']
  1. sort
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--冒泡排序方法-->
<script type="text/javascript">

function sortNumber(a,b)
{
  return a - b
}

var arr = new Array(6)
  arr[0] = "10"
  arr[1] = "5"
  arr[2] = "40"
  arr[3] = "25"
  arr[4] = "1000"
  arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>