输入手机号，输入完input中显示的是脱敏后的手机号，还可以修改手机号

Question

输入手机号，输入完input中显示的是脱敏后的手机号，还可以修改手机号，输入完以后main-toubao-phone隐藏

<div>
                <p>
                    <span class="main-toubao-info-xing">*</span>
                    <span>手机号</span>
                </p>
                <input type="text" :disabled="flag" v-model="customerphone" placeholder="请输入" maxlength="11" @input="updatePhone"/>
            </div>
            <p class="main-toubao-phone">请填写投保时使用的手机号</p>

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

实现这个功能，我们可以使用Vue.js来完成。以下是实现这个需求的步骤和代码示例：

1. 数据绑定：使用Vue的v-model指令来实现数据的双向绑定，这样用户在input框中输入的内容可以实时更新到Vue实例的数据中。

2. 脱敏显示：在input框中显示脱敏后的手机号，可以通过监听input事件，然后对输入的手机号进行处理，只显示最后几位数字。

3. 隐藏提示信息：当用户完成输入后，可以通过设置一个标志位（flag），来控制提示信息的显示与隐藏。

4. Vue实例：创建一个Vue实例，其中包含手机号的数据和标志位。

下面是具体的实现代码：

<div id="app">
    <div>
        <p>
            <span class="main-toubao-info-xing">*</span>
            <span>手机号</span>
        </p>
        <!-- 使用v-model绑定customerphone，使用@input监听输入事件 -->
        <input type="text" :disabled="flag" v-model="customerphone" placeholder="请输入" maxlength="11" @input="updatePhone"/>
    </div>
    <!-- 使用v-show控制提示信息的显示与隐藏 -->
    <p class="main-toubao-phone" v-show="!flag">请填写投保时使用的手机号</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            customerphone: '', // 初始手机号为空
            flag: false,       // 控制提示信息显示的标志位
        },
        methods: {
            updatePhone: function(event) {
                // 确保输入的是11位数字
                let phone = event.target.value.replace(/\D/g, '').slice(0, 11);
                // 更新手机号数据
                this.customerphone = phone;
                // 如果输入完成（即长度为11位），则隐藏提示信息
                if (phone.length === 11) {
                    this.flag = true;
                }
                // 脱敏显示手机号，只显示最后4位
                this.customerphone = phone.slice(-4);
            }
        }
    });
</script>

注意：上面的代码示例中，updatePhone方法会将输入的手机号转换成数字，并限制长度为11位。然后，如果长度达到11位，将隐藏提示信息。同时，脱敏显示手机号，只显示最后4位。

参考链接：

• Vue.js 官方文档：https://vuejs.org/v2/guide/
• Vue.js v-model 指令：https://vuejs.org/v2/api/#v-model
• Vue.js 事件处理：https://vuejs.org/v2/guide/events.html

这些链接提供了Vue.js的基础知识和具体用法，可以帮助你更好地理解上面的代码示例。