vue 动态绑定placeholder

最新推荐文章于 2025-03-15 20:11:17 发布

原创最新推荐文章于 2025-03-15 20:11:17 发布 · 1.1w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

收录于

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Vue中使用v-if和v-else动态控制input的placeholder，通过计算属性psdPlaceholder根据indexNav的值来显示不同的密码提示，如登录密码或交易密码。

前言： 当placeholder的值不唯一时，就可以动态绑定placeholder

在这里插入图片描述

<div class="box flex">
          <span v-if="indexNav == 0">登录密码</span>
          <span v-else>交易密码</span>
          <input
            type="password"
            :placeholder="psdPlaceholder"
            v-model.trim="psd"
          />
        </div>

然后用computed属性

  computed: {
  //psdPlaceholder 是你需要用到的名字
    psdPlaceholder() {
      return this.indexNav == 0
        ? "请输入您的新登录密码"
        : "请输入您的新交易密码";
    },
  },