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

最新推荐文章于 2024-04-19 15:50:18 发布
最新推荐文章于 2024-04-19 15:50:18 发布
阅读量3.3k 收藏 2
点赞数 2
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nighsloth/article/details/114808059
版权
  • 背景
    有两个input框，v-model使用的相同数据，但是我的第二个input框需要它不能编辑，当然input框的值也不能修改，所以我打算用placeholder来显示input的数据

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

六月要好好加油呀
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue点击input弹出带搜索键盘并监听该元素的方法
12-02
1.遇到问题： 需要做一个点击input弹出带搜索的键盘。 解决： input的type=”search”,可弹出带搜索的键盘。并监听搜索按钮，请求数据 <input @keyup.13="show()" type="search"> 2.但是又遇到一个新的问题： 点击搜索之后键盘没有收回。 解决： 通过$refs获取input 监听搜索按钮，添加.blur() <input @keyup.13=show() type="search" ref="input1"> show(){ this.$refs.input1.blur(); } 3.测试时发现ios无法弹出带搜索的键盘 解决： 给
input点击后placeholder中的提示消息消失
09-02
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ‘1888888888’; 这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”phone”,this.$route.query.mobile) 或者绑定到data里边的一个字符串，也是可以解决
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
vue中 input placeholder换行
最新发布
qq_45309871的博客
04-19 169
vue中 input placeholder换行。
vue修改子组件中的el-input的placeholder字体颜色
花椒和蕊的博客
08-24 1万+
1/在父组件的子组件上定义redHolder，父组件是列表，所以传值是row.redHolder。我的解决思路是在父组件中根据条件传值给子组件，子组件根据条件，三元表达式的形式动态增加类名。如果直接修改el-input的placeholder字体颜色，其实很简单。但如果是子组件，就很难在父组件中直接去改变，也许是我没有遇到更好的方法。4/子组件prop中接收redHolder 的值。3/在子组件中给input加类名。2/在父组件中根据条件赋值。5/子组件css样式。
vue-element动态渲染placeholder的值
MaXumr的博客
07-26 1354
个人博客：https://maxusun.github.io/ 转载请注明出处 在使用element时有个需求：当点击语言切换的时候，可以将界面切换成英文或者中文，需要实时动态渲染。在开始的时候使用v-bind绑定的，但是发现使用v-bind绑定的话，对于一些属性不会进行实时的改变，需要点击一下刷新。在网上找好久，后来试了一种方法，成功解决。 使用vue里面的computed: // 这是实现代码 computed:{ elinputphone(){return this.$t('msg.phone
vue+elementui中input框 动态更改placeholder
houhouha11的博客
05-15 7569
当时项目需求是 做一个下拉选择框 当我选择下拉框的任意一个值的时候，下面的input的placeholder会提示。 注意点：要在data中定义holder 然后用到wacth方法，监听select的变化。 <el-form-item label="类型"> <el-select v-model="newtypeValue" placeholder="请选择" clearable > <el-option v-for="item in typeNewOptions
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 动态绑定placeholder
m0_67841039的博客
11-09 5017
placeholder的动态绑定
实现input框中placeholder的动态效果
qq_49668888的博客
05-28 1047
1.先看一下实现的效果。
element-ui input框 动态更改placeholder
热门推荐
cofecode的博客
11-15 3万+
项目中遇到的实际情况：两个单选框，后面跟一个input框，选择某一个单选框的时候，后面的input框的placeholder会跟着变化。比如操作单选框买家，input框后面placeholder出现“请输入买家账号”；操作“卖家”单选框按钮的时候，placeholder变成“请输入卖家账号”两种方法：方法一写两个input框 根据radio的值来做显示和隐藏，完成placeholder的变化（
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 ...
js修改placeholder样式，使placeholder超出换行
weixin_42289080的博客
06-14 1239
使用::placeholder修改placeholder的样式，使用js新增style文件插入document中
vue点击input框placeholder内容消失
ycc1111的博客
04-06 692
只需要在input标签上加onfocus = "this.placeholder=''"
Element Input 输入框 动态更改placeholder
疏雨萧萧千行泪
08-06 6704
&lt;el-form-item label="申请说明：" prop="applyDesc"&gt; &lt;el-input type = "textarea" :maxlength = "500" :rows = "3" :placeholder = setPlaceholder(adminShow) @change = &qu
vue动态修改placeholder颜色
松烟入墨
09-07 2255
Vue3或者使用原生动态修改placeholder颜色
vue 中动态绑定 placeholder的值
KLW75
07-02 6281
在页面中使用：placeholder 绑定一个名称 <input type="text" :placeholder="绑定的值的名称" /> 在数据部分 data(){ return{ 名称: '具体的值',//将input的placeholder绑定上这个属性 ，绑定这个值 } } 这个值具体为什么，视情况而定，还可以监听一个值的变化，然后根据那个值的变化，变化绑定的值的具体内容 例如 watch: { 监听的值: function(.
Vue3——动态input边框效果实现
NanChen的博客
09-13 1617
因为这里使用的是Vant移动端写的，所以不好给自带的input框添加foucs样式，所以我这里就给他一个hover代替点击焦点样式，效果是一致的。
vue中改变input中placeholder字体的颜色
06-07
在 Vue 中，您可以使用内联样式或者样式表来更改 input 中 placeholder 的字体颜色。以下是两种方法： 1. 使用内联样式： ```html <template> <div> <input type="text" :style="{ 'color': 'red' }" placeholder="请输入内容" /> </div> </template> ``` 在这个例子中，我们使用了 Vue 的绑定语法 `:style`，并将颜色设置为红色。 2. 使用样式表： ```html <template> <div> <input type="text" class="my-input" placeholder="请输入内容" /> </div> </template> <style scoped> .my-input::placeholder { color: red; } </style> ``` 在这个例子中，我们使用了样式表，并在样式表中使用了伪元素 `::placeholder` 来选择 input 的 placeholder，然后将颜色设置为红色。请注意，我们在 `style` 标签上使用了 `scoped` 属性，这样样式只会应用于当前组件的作用域内，不会影响其他组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值