vue里input根据value改变背景色的实例


Posted in Javascript onSeptember 29, 2018

1、首先定义两个不同的

.null-input .el-input__inner {
background-color: rgba(255, 255, 255, 0.8); 
color: #525661; 
font-size: 16px;
}

.no-null-input .el-input__inner { 
background-color: rgba(255, 255, 255, 1); 
color: #524F52; 
font-size: 16px;
}

2、根据:class 控制input的class

:class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" @change="changeCss"

3、根据change方法判断input的值 然后控制isNullInput的值

changeCss(val) { 
if (val === "") { 
this.isNullInput = true; 
} else { 
this.isNullInput = false; 
} 
console.log(this.isNullInput); 
}

但是关于placeholder颜色无法改变

网上的方法试了 没有效果--网上方法:input::-webkit-input-placeholder

以上这篇vue里input根据value改变背景色的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很好用的js日历算法详细代码
Mar 07 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
JS实现4位随机验证码
Oct 19 Javascript
4个顶级开源JavaScript图表库
Sep 29 #Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 #Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 #Javascript
vue根据值给予不同class的实例
Sep 29 #Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
Vue中的Props(不可变状态)
Sep 29 #Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 #Javascript
You might like
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
javascript 解析url的search方法
2010/02/09 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
管理部部长岗位职责
2013/12/05 职场文书
购房意向书
2014/04/01 职场文书
专家推荐信模板
2014/05/09 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
营销计划书范文
2015/01/17 职场文书
解除同居协议书
2015/01/29 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android