问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 身份证号码 中间用*代替

头像
燕子am
    13133373

    请教各位，，从后台v-for循环出来的银行卡号码，中间用*代替，用vue是怎么做的呢

    vue.js
    阅读 9.8k
    4 个回答
    得票最新
    头像
    luozz
      5.8k3629
      ✓ 已被采纳

      使用Vue的过滤器，可以很好的解决这个问题，具体实现如下例(直接复制粘贴便可运行看到效果)：

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue filters</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in ID">{{item | hideMiddle}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                ID: [
                "1234567897897","5648754542132"]
            },
            methods: {            
            },
            filters: {
                hideMiddle(val) {
                    return `${val.substring(0,3)}****${val.substring(val.length-3)}`
                }
            }
        })
    </script>
</body>
</html>

      页面输出效果

      clipboard.png

      头像
      孟思行
        2.1k1920
        头像
        冉娃娃
          1.2k1790123

          解决

          <div id="app">
    <span v-for="item in tel">
        {{newItem(item)}}
    </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    const tel = ['13333333333', '13333331111', '13311112222'];
    const app = new Vue({
        el: '#app',
        data: {
            tel
        },
        methods:{
            newItem(item){
                return `${item.substring(0,3)}****${item.substring(item.length-3)}`;
            }
        }
    })
</script>

          原因

          这个其实不是vue的问题哈,只是js问题而已

          原理

          我也经常会遇到这种情况
          本身一个很简单的问题,但是放到一个不熟悉的环境,就不会办了..
          不知道为什么会这样......

          头像
          fanfan
            1
            新手上路，请多包涵

            Error in render: "TypeError: Cannot read property 'substring' of undefined"

            我的为什么会报错，

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题