vue+elementui中input框 动态更改placeholder

最新推荐文章于 2024-09-23 12:00:38 发布
最新推荐文章于 2024-09-23 12:00:38 发布
阅读量7.8k 收藏 4
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houhouha11/article/details/106137712
版权
本文介绍了如何在Vue结合ElementUI的项目中，根据下拉选择框的值动态改变输入框input的placeholder。关键在于利用data存储placeholder，并通过watch监听select的选择变化来实现。
摘要由CSDN通过智能技术生成

当时项目需求是 做一个下拉选择框 当我选择下拉框的任意一个值的时候，下面的input的placeholder会提示。
在这里插入图片描述
注意点：要在data中定义holder
然后用到wacth方法，监听select的变化。

<el-form-item label="类型">
	<el-select v-model="newtypeValue" placeholder="请选择" clearable >
		<el
最低0.47元/天 解锁文章
皮卡丘Pikachu
关注
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3596
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
Vue+ElementUI实战
qq_41359998的博客
08-18 846
Vue+ElementUI实战 使用之前创建vue-cli项目的方法 1.创建一个名为hi-vue的工程 vue init webpack hi-vue 2.安装依赖，我们需要安装element-ui、sass-loader和node-sass # 进入工程目录 cd hello-vue # 安装 element-ui npm i element-ui -S # 安装依赖 npm install # 安装 SASS 加载器 cnpm install sass-loader node-sass --sav
element-ui input框 动态更改placeholder
热门推荐
cofecode的博客
11-15 3万+
项目中遇到的实际情况：两个单选框，后面跟一个input框，选择某一个单选框的时候，后面的input框的placeholder会跟着变化。比如操作单选框买家，input框后面placeholder出现“请输入买家账号”；操作“卖家”单选框按钮的时候，placeholder变成“请输入卖家账号”两种方法：方法一写两个input框 根据radio的值来做显示和隐藏，完成placeholder的变化（
关于在vue2中给el-input等输入框的placeholder加样式
最新发布
I_Allen_Liu的博客
09-23 457
【代码】关于在vue2中给el-input框的placeholder加样式。
vue项目input的placeholder根据用户的选择改变
weixin_30339457的博客
06-05 1612
html部分 <el-input :placeholder="holder" v-model="searchKey"> <el-select v-model="searchType" placeholder="保单号" slot="prepend" style="width: 110px;"> ...
vue.js element-ui动态改变组件placeholder的值
幼儿园老大的博客
08-21 1万+
element-ui根据条件动态改变组件placeholder的值 假设有一个需求，一个下拉框select，如果无选项，则显示 暂无可用VPC，请先申请，如果有选项， 则显示 请选择 利用vue.js 的v-bind属性，将placeholder绑定一个动态参数，如下： :placeholder="vpcPlaceholder" 该动态参数通过某个条件计算而来，因此将该参数写...
Element ui 修改el-input 的placeholder样式
qq_39224105的博客
01-06 8957
/deep/.el-input__inner { &::placeholder { color: red; font-size: 16px; } }
vue+elementUi 实现密码显示/隐藏+小图标变化功能
01-19
vue+elementUi 实现密码显示/隐藏+小图标变化（js一共三行代码，其中一行为了美观）…，先给大家展示下效果图，感觉不错可以参考实现代码。 【效果图】 【html】 // 前后代码【略】 密码 prop=pwd> ...
elementui可视化设计_Vue+ElementUI实现表单动态渲染、可视化配置的方法
weixin_39875629的博客
01-15 670
动态渲染就是有一个异步的数据，大概长这样：{"inline": true,"labelPosition": "right","labelWidth": "","size": "small","statusIcon": true,"formItemList": [{"type": "input","label": "姓名","disable": false,"readonly": false,"va...
node之实现登录注册分页小案例(node+vue+elementUI+axios+mysql)
qq_38903404的博客
09-04 1024
第一步项目的基本配置 安装node 的express 脚手架 npm install -g express-generator 创建不带视图模板的项目 express demo --no-view // demo 是项目名称 --no-view 代表生成的项目不带视图模板 安装项目的依赖 1.首先 cd到创建的目录 npm run start 启动项目 2.npm install 安装 npm install node-dev -D //项目 热更新的方式 然后在 `pa
2021/03/14 vue 动态给 input框设置placeholder的值
Nighsloth的博客
03-14 3670
背景 有两个input框，v-model使用的相同数据，但是我的第二个input框需要它不能编辑，当然input框的值也不能修改，所以我打算用placeholder来显示input的数据 –效果 –代码 将v-model改成了 v-bind:placeholder=“holder” –js代码 ...
VUE.js实现动态设置输入框disabled属性
10-16
今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
修改input 的 placeholder
weixin_30516243的博客
05-09 82
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666!important; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666!important; } input::-moz-...
修改input placeholder的文字样式
qq_64436918的博客
06-07 364
input:-moz-placeholder { color: #ccc; }input::-moz-placeholder { color: #ccc; }input::-webkit-input-placeholder{color: #ccc;}input:-ms-input-placeholder {color: #ccc;}
vue 动态绑定placeholder
m0_67841039的博客
11-09 5299
placeholder的动态绑定
css 更改 input中 placeholder
你怎么也喜欢嘴巴嘟嘟
12-16 622
input::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #ABB0B5; line-height: 19px; } input::-moz-input-placeholder { font-size: 14px; font-weight: 500; color: #ABB0B5; line-height: 19px; } input::-ms-input-placeholder
element placehold 换行
u012174809的专栏
01-07 1314
代码 importContentSample: '导入内容格式示例:\n$资源名称1 \n播放源地址\n播放源地址\n ... \n$资源名称2\n播放源地址\n播放源地址 \n ...' <el-input v-model="ruleForm.content" :autosize="{ minRows: 8, maxRows:15}" :placeholder="$t('programM...
uviews如何修改输入框的placeholder的样式 以及输入框的样式
weixin_45041493的博客
01-23 2297
uviews如何修改u--input的输入框样式
vue中el-input以及el-select组件，“ 获取焦点 ”时，怎么修改【背景样式，placeholder文字颜色】
weixin_50450473的博客
07-26 8211
html： 此处placeholder的文字颜色不易修改，先自定义2种不同文字颜色样式css： /deep/.colorchange.el-input__inner::-webkit-input-placeholder{ color:#c7fbeb; // 初始化的文字颜色 } /deep/.searchchange.el-input__inner::-webkit-input-placeholder{ color:#333; // 获取焦点时的文字颜色 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值