2021/03/14 vue 动态给 input框设置placeholder的值

最新推荐文章于 2025-03-15 20:11:17 发布
最新推荐文章于 2025-03-15 20:11:17 发布
阅读量3.8k 收藏 2
点赞数 2
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nighsloth/article/details/114808059
版权
本文介绍如何在Vue框架中使用elementUI组件库实现一个不可编辑的输入框，并通过placeholder显示输入框的值。该方法适用于需要展示数据但不需要用户编辑的情况。

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

  • 背景
    有两个input框，v-model使用的相同数据，但是我的第二个input框需要它不能编辑，当然input框的值也不能修改，所以我打算用placeholder来显示input的数据

–效果
在这里插入图片描述
–代码
将v-model改成了 v-bind:placeholder=“holder”
在这里插入图片描述
–js代码
在这里插入图片描述
–参考链接
vue+elementui中input框 动态更改placeholder
博主有案例

vue+elementui中input框 动态更改placeholder
houhouha11的博客
05-15 7937
当时项目需求是 做一个下拉选择框 当我选择下拉框的任意一个值的时候，下面的input的placeholder会提示。 注意点：要在data中定义holder 然后用到wacth方法，监听select的变化。 <el-form-item label="类型"> <el-select v-model="newtypeValue" placeholder="请选择" clearable > <el-option v-for="item in typeNewOptions
vue el-input 文本域设置 placeholder 样式
且听风吟的博客
06-24 2359
vue el-input 文本域设置 placeholder 样式
VUE.js实现动态设置输入框disabled属性
10-16
今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 修改::placeholder的颜色
最新发布
Aa12364567的博客
03-15 264
vue 修改::placeholder的颜色。
vue 动态绑定placeholder
m0_67841039的博客
11-09 5446
placeholder的动态绑定
vue项目input的placeholder根据用户的选择改变
weixin_30339457的博客
06-05 1636
html部分 <el-input :placeholder="holder" v-model="searchKey"> <el-select v-model="searchType" placeholder="保单号" slot="prepend" style="width: 110px;"> ...
动态修改el-input 中的placeholder样式；
m0_57454691的博客
10-20 851
4. el-input 标签中给 --inputColor变量赋值，并添加点击事件。1.原先修改el-input 中的placeholder样式。2. 给placeholder样式添加CSS变量。3. 声明一个修改颜色的变量 colorVal。
javascript 动态设置input的placeholder值
qq_37201623的博客
01-02 1万+
方法1：通过js来设置文本框input的placeholder值 document.getElementById(“input”).setAttribute(“placeholder”,“新文本内容”); 方法2：通过jquery设置文本框input的placeholder值 $(’#input’).attr(‘placeholder’,‘新文本内容’)； 二、 js 下拉框选择改变第二个inp...
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 ...
vue监听input标签的value值方法
10-18
当用户在`input`框中输入内容时，`@input`会触发绑定的`search`方法，并将当前事件对象传递给该方法： ```html <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> ``` 在`...
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
08-28
通过获取data-key，设置input输入框中placeholder的动态值。 在js文件中，定义了placeholder函数，获取当前点击的span标签的dataset.num值，并将其赋值给num变量。然后，通过this.setData方法将ph变量的值设置为...
vue 中动态绑定 placeholder的值
KLW75
07-02 6952
在页面中使用：placeholder 绑定一个名称 <input type="text" :placeholder="绑定的值的名称" /> 在数据部分 data(){ return{ 名称: '具体的值',//将input的placeholder绑定上这个属性 ，绑定这个值 } } 这个值具体为什么，视情况而定，还可以监听一个值的变化，然后根据那个值的变化，变化绑定的值的具体内容 例如 watch: { 监听的值: function(.
element-ui input框 动态更改placeholder
热门推荐
cofecode的博客
11-15 4万+
项目中遇到的实际情况：两个单选框，后面跟一个input框，选择某一个单选框的时候，后面的input框的placeholder会跟着变化。比如操作单选框买家，input框后面placeholder出现“请输入买家账号”；操作“卖家”单选框按钮的时候，placeholder变成“请输入卖家账号”两种方法：方法一写两个input框 根据radio的值来做显示和隐藏，完成placeholder的变化（
实现input框中placeholder的动态效果
qq_49668888的博客
05-28 1329
1.先看一下实现的效果。
Vue3——动态input边框效果实现
NanChen的博客
09-13 1863
因为这里使用的是Vant移动端写的，所以不好给自带的input框添加foucs样式，所以我这里就给他一个hover代替点击焦点样式，效果是一致的。
给input的提示值(placeholder)设置样式
zzj19990913的博客
02-05 1377
背景： 原本样式是这样的 想要提示值的位置往左移动一下，添加如下代码： #third-search-input::-webkit-input-placeholder { padding-left: 20px; } 当然了，也可以设置提示值颜色啊等等，自己试试吧。 对了，我这里使用的是chrome浏览器 ::-webkit-input-placeholder{} /* 使用webkit内...
vue中 input placeholder换行
qq_45309871的博客
04-19 601
vue中 input placeholder换行。
Vue input placeholder占位文本暗文（密文）显示
喵喵嘀嘀咚的博客
06-30 1836
Vue input placeholder占位文本暗文（密文）显示 最近有个openwrt的web前端配置的需求，c/c++老程序员迫不得已来学习写前端，发文来记录学习的过程。 里面有个需求是账号管理，用于用户配置设备的账号密码，placeholder显示原账号密码，入下图： 后面感觉密码直接显示好像不太好，希望占位文本的密码默认显示暗文，通过后面的眼睛来显示明文，我看了下element官网说明，show-password和type='password’只能控制输入的文字暗文显示，并不能满足我placeh
前端vue H5项目输入框placeholder在移动端跟ios端兼容不一致问题
weixin_32395459的博客
08-01 132
问题楼主最近在做H5项目的时候发现，想改变placeholder输入提示文本的大小，改了之后，在真机上面input输入框的placeholder在安卓设备以及ios设备不一致的情况，在安卓设备是正常的，而在ios上输入框的placeholder没有对齐。解决方案原来是设置placeholder的font-size时未设置i...
Vue3 input框设置自动换行 并且高度自适应
09-19
在Vue3中，如果你想让`<input>`元素支持自动换行并且高度自适应，你需要结合CSS样式来实现。通常，HTML部分可以保持简单： ```html <template> <div ref="inputWrapper"> <input v-model="value" :rows="rows" placeholder="输入内容..." /> </div> </template> ``` 在这个例子中，`v-model`用于双向数据绑定输入值，`:rows`属性设置了行数，这将启用文本区域的行为。 然后，在你的CSS部分，你可以这样配置`inputWrapper`的样式： ```css <style> .inputWrapper { display: flex; flex-direction: column; resize: none; /* 阻止垂直滚动条 */ } .inputWrapper input { flex: 1; /* 自动调整高度，填充剩余空间 */ overflow-y: auto; /* 当内容超过一屏时显示滚动条 */ padding: 0; /* 如果需要，移除默认内边距 */ box-sizing: border-box; /* 包含边框和内边距在计算高度内 */ } </style> ``` 这里的关键是设置`flex: 1`，使得输入框的高度会随着内容的增长而动态调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值