前端Vue光标在输入框内，内容清空。光标离开，内容显示。

本文链接：https://blog.csdn.net/weixin_57725256/article/details/127611318

博客涉及前端领域，包含JavaScript和Java相关信息技术内容，但具体内容未给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      <van-form>
        <van-field
            v-model="username"
            maxlength="10"
            :rules="[{ required: true, message: '请输入您的姓名' }]"
            @focus="inputFocus"
            @blur="inputBlur"
          />
          <van-field
            v-model="npcNo"
            maxlength="20"
            :rules="[{ required: true, message: '请输入代表证号' }]"
            @focus="inputFocusnpc"
            @blur="inputBlurnpc"
          />
          <div class="submit-btn" @click="onSubmit">请您登录</div>
        </van-form>

export default {
  data() {
    return {
      username: "您的姓名",
      npcNo: "代表证号",
    };
  },
  methods: {
    onSubmit() {
      this.$refs.loginForm
        .validate()
        .then((res) => {
          this.handleLogin();
        })
        .catch((err) => {});
    },
// 后台接口方法
   handleLogin() {
      let req = {
        name: this.username,
        npcNo: this.npcNo,
      };
      this.$post(loginApi, req)
        .then((res) => {
          if (res.code !== 0) {
            this.$toast.fail(res.msg || "请求失败");
            return;
          }
          setSessionStorage("userInfo", JSON.stringify(res.data));
          this.$router.push({ path: "/hand" });
        })
        .catch((err) => err);
    },
  // 光标在输入框内 姓名清空
    inputFocus() {
      this.username === "您的姓名" && (this.username = "");
    },
    inputBlur() {
      this.username === "" && (this.username = "您的姓名");
    },
    // 光标在输入框内 证号清空
    inputFocusnpc(){
      this.npcNo === "代表证号" && (this.npcNo = "");
    },
    inputBlurnpc(){
      this.npcNo === "" && (this.npcNo = "代表证号");
    }
  },
};