2个小技巧

概述

沉迷业务，无法自拔ing，今天就水一下好了。记录 2 个小技巧，供以后开发时参考，相信对其他人也有用。

求最大值

一般对数据求最大值我是这么求的：

const max = [1, 2, 3, 4, 5].reduce((accu, curr) => accu > curr ? accu : curr);

但是还有更简单完全不需要考虑兼容问题的方法：

const max = Math.max(...[1, 2, 3, 4, 5]);

v-model 的另一种使用

我们知道，v-model 其实就是 :value 和 @input 的合体。所以，有些情况下，对于那些能够使用 v-model 的组件，我们只需使用 :value 就可以了。（比如说 el-input 和 el-checkbox）

比如说 el-input，示例代码如下：

<template>
  <el-input
    :value="input"
    placeholder="请输入内容"
    @input="handleInput"
  ></el-input>
</template>
<script>
export default {
  data() {
    return {
      input: '',
    };
  },
  methods: {
    handleInput(val) {
      this.input = val;
      console.log(val);
      console.log('this.input', this.input);
    },
  },
};
</script>

上面的代码和使用 v-model 有同样的效果，但是能对 input 进行更精细的控制。比如说，我可以在 getInput 方法里面对 val 进行其他处理。

再比如 el-checkbox，示例代码如下：

<template>
  <el-checkbox
    value="checked"
    @change="handleCheckboxChange"
  ></el-checkbox>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    handleCheckboxChange(val) {
      this.checked = val;
      console.log(val);
      console.log('this.checked', this.checked);
    },
  },
};
</script>