vue如何根据取货凭证进行对比
时间: 2023-06-29 20:13:53 浏览: 37
在 Vue 中根据取货凭证进行对比可以通过以下步骤:
1. 在 Vue 组件中定义一个 data 属性来保存取货凭证和用户输入的凭证:
```javascript
export default {
data() {
return {
voucher: '', // 保存生成的取货凭证
inputVoucher: '' // 保存用户输入的凭证
}
},
// ...
}
```
2. 生成取货凭证的代码可以与获取取货凭证的代码合并到同一个函数中:
```javascript
export default {
data() {
return {
voucher: '', // 保存生成的取货凭证
inputVoucher: '' // 保存用户输入的凭证
}
},
mounted() {
// 生成取货凭证并保存到 data 属性中
this.voucher = this.randomString(8);
},
methods: {
// 生成随机字符串
randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
// 对比取货凭证
compareVoucher() {
if (this.voucher === this.inputVoucher) {
// 验证通过
console.log('验证通过');
} else {
// 验证失败
console.log('验证失败');
}
}
}
}
```
3. 在组件模板中添加一个输入框和一个按钮用于用户输入取货凭证和触发对比操作:
```html
<template>
<div>
<div>
取货凭证:{{ voucher }}
</div>
<div>
<input type="text" v-model="inputVoucher" placeholder="请输入取货凭证" />
<button @click="compareVoucher">验证</button>
</div>
</div>
</template>
```
这样就可以在 Vue 中根据取货凭证进行对比了。当用户点击验证按钮时,会调用 compareVoucher 方法来进行对比,如果验证通过则打印“验证通过”,否则打印“验证失败”。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)