在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue 身份證號(hào)碼 中間用*代替

vue 身份證號(hào)碼 中間用*代替

請(qǐng)教各位，，從后臺(tái)v-for循環(huán)出來的銀行卡號(hào)碼，中間用*代替，用vue是怎么做的呢

回答
編輯回答
陌顏

解決

<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>

原因

這個(gè)其實(shí)不是vue的問題哈,只是js問題而已

原理

我也經(jīng)常會(huì)遇到這種情況
本身一個(gè)很簡(jiǎn)單的問題,但是放到一個(gè)不熟悉的環(huán)境,就不會(huì)辦了..
不知道為什么會(huì)這樣......

2017年5月10日 18:40
編輯回答
有點(diǎn)壞

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

我的為什么會(huì)報(bào)錯(cuò)，

2018年3月13日 00:41
編輯回答
笑忘初

使用Vue的過濾器，可以很好的解決這個(gè)問題，具體實(shí)現(xiàn)如下例(直接復(fù)制粘貼便可運(yùn)行看到效果)：

<!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

2018年5月2日 19:51
編輯回答
遲月

這種場(chǎng)景最適合使用vue的過濾器
vue官網(wǎng)-過濾器

2017年7月16日 14:03