vue 动态绑定placeholder

placeholder的动态绑定

热爱生活的-小yin

5200人浏览 · 2022-11-09 22:17:09

热爱生活的-小yin · 2022-11-09 22:17:09 发布

前言： 以前使用的input输入框，placeholder的值是固定不变的，现在根据需求，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
        ? "请输入您的新登录密码"
        : "请输入您的新交易密码";
    },
  },

转发自：vue 动态绑定placeholder_pxhing的博客-CSDN博客_placeholder动态绑定

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport