vue路由 filters方法和filter过滤用法总结

路由传参写法 ---- 声明式

<router-link :to="{path:'dealDetail/'+id}"><router-link>

<router-link :to="{name:'dealDetail',params:{id:123}}"><router-link>

//也可以使用以下方式：
<router-link v-bind="{to:'/dealDetail/'+id}"><router-link>

路由传参写法 ---- 编程式

this.router.push({ name: 'dealDetail', params: { id: 123 }})  ->/dealDetail/123

this.router.push({ path: 'dealDetail', query: { id: 123 }}) ->dealDetail?id=123

路由传参写法 ---- 路由里要配置，不然页面空白

// 在路由中定义参数
const router = new VueRouter({
  routes: [
    { path: '/user/:id',  name: 'user', component: User }
  ]
})
//单个
{ path: '/dealDetail/:id', name:'dealDetail',component: dealDetail}
//多个
{ path: '/dealDetail/:id/:formId', name:'dealDetail',component: dealDetail}

路由传参写法 ---- 页面取值

//params
<div>User {{ $route.params.id }}</div>
//或者
this.$route.params.id

//query
<div>User {{ $route.query.id }}</div>
//或者
this.$route.query.id

vuex简易存取 小用了...

// 定义store
import Vue from 'vue'
import Vuex  from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state:{
             id: ''
      },
      mutations:{
         setId(state , id) {
            state.id = id            
         }
      }
})

// 在a页面设置
 this.$store.commit( 'setId' ，(123) )

// 在b页面取
this.$store.state.id 

定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：filter() 不会对空数组进行检测。
注意：filter()不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

打印

let arr = ['A', 'B', 'C'];
arr.filter(function (element, index, self) {
    console.log(element); // vue模板.html：依次打印'A', 'B', 'C'
    console.log(index); // vue模板.html：依次打印0, 1, 2
    console.log(self); // vue模板.html：self就是变量arr
    return true;
});

过滤数组中符合条件的元素：基本用法

let arr = [1, 3, 5, 8,10]
let arrFilter = arr.filter(el => el> 4)
console.log(arrFilter) // vue模板.html：[5, 8,10]

过滤对象数组中符合条件的对象：基本用法

let arrObj = [{
            name: 'A', age: 130
            }, {
            name: 'B', age: 230
            }, {
            name: 'C', age: 120
            }, {
            name: 'D', age: 110
            }, {
            name: 'E', age: 280
}]
let arrObjFilter = arrObj.filter(ele => ele.age >= 130)
console.log(arrObjFilter)
 /*vue模板.html
*   (3) [{…}, {…}, {…}]
*   0: {name: "A", age: 130}
 *   1: {name: "B", age: 230}
*   2: {name: "E", age: 280}
*   length: 3
*/

vue里面的filters限制单行文字长度

    //过滤
    filters:{  
          filtersTextChange(value){
              return value.length >= 10 ? value.substr(0,10) + '...' : value;
          }
    },
    //方法
    substrText(str,long){
        if(str.length>=long){
            return str.substr(0,long) + '...';
        }
        return str;
    },
    //去掉千分号  转换千分号toLocaleString()
    rmoney(s){
        return parseFloat(s.replace(/[^\d\.-]/g, ""));
    },

数组中的空字符去除

let arr = ['1', '2', '3', '', null, undefined, '  ', '4']
let arrFilter = arr.filter((ele, index, arr) => {
      return ele && ele.trim()
})
 console.log(arrFilter) //vue模板.html:79 (4) ["1", "2", "3", "4"]

需求用法：过滤出符合条件的对象然后map()去除某些不需要的字段

let arrObj = [{
      name: 'A', age: 130
      }, {
      name: 'B', age: 230
      }, {
      name: 'C', age: 120
      }, {
      name: 'D', age: 110
      }, {
      name: 'E', age: 280
 }]
let arrObjFilter = arrObj.filter(ele => ele.age >= 130).map((ele => {
     return ele.name
 }))
 console.log(arrObjFilter)//vue模板.html:89 (3) ["A", "B", "E"]

数组去重

let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {
  return arr.indexOf(ele) === index
})
console.log(arrFilter ) //vue模板.html:79 (4) [1, 2, 3, 4]

删掉偶数，只保留奇数

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var arrFilter = arr.filter(function (x) {
     return x % 2 !== 0;
});
console.log(arrFilter )  //vue模板.html: [1, 5, 9, 15]