JS MD5加密

请输入MD5明文字符

<div>
 <el-input v-model="str" placeholder="请输入内容"></el-input>
 <el-table
   stripe
   :data="tableData"
   :show-header="showHeader"
   style="width: 100%">
   <el-table-column
     prop="label"
     width="150px"
   >
   </el-table-column>
   <el-table-column
     prop="value"
   >
   </el-table-column>
 </el-table>
</div>

<script>
import md5 from 'crypto-js/md5';

export default {
  data() {
    return {
      showHeader:false,
      str:'',
      tableData: [{
        label: 'MD5明文字符',
        value: '',
      }, {
        label: '16位 小写',
        value: '',
      }, {
        label: '16位 大写',
        value: '',
      }, {
        label: '32位 小写',
        value: '',
      }, {
        label: '32位 大写',
        value: '',
      }]
    }
  },
  watch: {
    str(newVal,oldVal) {
      const _newVal = newVal;
      const _md5Val = _newVal ? md5(_newVal).toString() : '';

      this.tableData[0]['value'] = _newVal;
      this.tableData[1]['value'] = _md5Val.substring(8,24).toLowerCase();
      this.tableData[2]['value'] = _md5Val.substring(8,24).toUpperCase();
      this.tableData[3]['value'] = _md5Val.toLowerCase();
      this.tableData[4]['value'] = _md5Val.toUpperCase();
    }
  }
}
</script>