vue将数据中的手机号码中间4位变成****
时间: 2023-07-23 07:58:07 浏览: 109
你可以使用正则表达式和字符串替换来实现将手机号码中的中间四位替换为****。以下是一个示例代码:
let phoneNumber = '12345678901';
let maskedPhoneNumber = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
console.log(maskedPhoneNumber); // 输出:123****8901
在上面的代码中,正则表达式/(\d{3})\d{4}(\d{4})/
匹配了手机号码的前三位和后四位,中间的四位数字被捕获为两个分组。在替换字符串'$1****$2'
中,$1
代表第一个分组(前三位),$2
代表第二个分组(后四位),中间的四位数字被替换为****。
你可以将phoneNumber
替换成你的实际数据,然后得到被替换后的结果。
相关问题
在vue页面中存在左中右三个Table,当点击中间的table中的某行后,左右两侧的table行高亮显示
在Vue中实现这样的功能,通常需要结合组件的状态管理以及事件监听。你可以创建一个表单组件,包含三个表格leftTable
, middleTable
, 和 rightTable
,每个表格都有相应的数据源。当你点击middleTable
的某一行,可以更新所有表格的状态,使其对应行变为高亮。
首先,在数据上,给每个表格的数据添加一个高亮状态属性,如highlightIndex
,用于存储当前被选中的行索引:
data() {
return {
leftTableData: ...,
middleTableData: ...,
rightTableData: ...,
highlightIndex: null // 初始值设为null
}
}
然后,在middleTable
的<tr>
元素上绑定v-on:click
事件,处理行点击动作:
<tr v-for="(item, index) in middleTableData" :key="index" @click="selectRow(index)">
<!-- 表格内容 -->
</tr>
在methods中定义selectRow
方法:
methods: {
selectRow(index) {
this.highlightIndex = index;
// 更新左右两侧表格的高亮行
this.leftTableData.forEach((item, i) => item.highlight = i === index);
this.rightTableData.forEach((item, i) => item.highlight = i === index);
},
unHighlightAll() {
this.highlightIndex = null;
this.leftTableData.forEach(item => item.highlight = false);
this.rightTableData.forEach(item => item.highlight = false);
} // 可能需要一个取消高亮的方法
}
最后,如果用户想清除高亮,可以在适当的地方调用unHighlightAll()
方法。
相关推荐

















