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 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
input框中的name和id的区别
Nov 16 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
JS的深浅复制详细
Oct 16 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
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php数组分页实现方法
2016/04/30 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python中字符串对齐方法介绍
2015/05/21 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python函数返回不定数量的值方法
2019/01/22 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python实现图片转字符小工具
2019/04/30 Python
Django缓存系统实现过程解析
2019/08/02 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
学雷锋月活动总结
2014/04/25 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
影视后期实训报告
2014/11/05 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
先进工作者事迹材料
2014/12/23 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python