vue随笔1

1、过滤器

filter函数：filter函数的回调函数必须是一个boolean值，当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，当返回一个false值时，回调函数会将这一次的n过滤掉，个人理解为filter函数相当于一个过滤器，只有满足条件的n才会被留下

示例代码：从数组中筛选小于100的数，保留到新的数组中

<script>
        // 定义一个数组
        const str = [12, 20, 100, 23, 67, 45, 233, 49]
        // filter函数的回调函数必须返回一个boolean值
        // 当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，
        // 当返回一个false值时，函数内部会自动将这次回调的n过滤掉
        let newStr = str.filter(function (n) {
            return n < 100
        })
        console.log(newStr);
        // filter筛选数组数据
</script>

2、Map、Json、实体类之间的转换

1.Map转JSON

  Map<String, Object> map = new HashMap<String, Object>();
        map.put("a", "a");
        map.put("b", "123");
 
        JSONObject json = new JSONObject(map);

2.JSON转实体类
定义实体类

package com.esint.ztb.hst.pojo.hstVo;

import java.io.Serializable;

public class HstR implements Serializable {
    private Integer code;
    private String  msg;
    private Object data; // 返回值

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

json 直接转指定对象

HstR dataReportObj = jsonObject.toJavaObject(HstR.class);

3、下载模板

download的值为自定义的文件全名

<!-- 放到public文件夹下，必须有download才会执行-->
<a href="./static/file/话术导入模板.xlsx" download="话术导入模板.xlsx">模板下载</a>
<!-- 放到static文件夹下-->
<a href="public/file/话术导入模板.xlsx" download="话术导入模板.xlsx">模板下载</a>

4、父传子传递

（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> //格式为    :自定义的属性 = 传输值或变量
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],//props接收
};
</script>