标签：Vue color watch js phone login data 监听

前阶段开发过程中，遇到这样一个需求，就是输入框无内容时按钮置灰，一旦输入了内容按钮变色，记录使用Vue.js实现过程。

1、思路：在 input 中使用 v-model 和 data中定义好的变量实现双向绑定，通过 data 中的值来监听input中的值，接下来使用$watch来监听data中的值，这样一旦input中的值改变，data中的值就会改变，这时我们就可以通过 $watch 来进行data改变后的响应操作。

实现代码：写个大概，主要看思路

<input v-model="login_phone" type="number" name="mh_phone" maxlength="11" >
<div id="btn">按钮</div>

var vm = new Vue({
	el: "",
	data(){
		return{
			login_phone: "",
		}
	},
	watch:{
		"login_phone":{
			handler:function(){
				if(this.login_phone != ""){
					$('#btn').css({'border':'1px solid #FE5848','background-color':'white','color':'#FE5848'});
				}else{
					$('#btn').css({'border':'1px solid #d8d8d8','background-color':'#C9C9C9','color':'white'});
				}
			},
			deep:true
		}
	}
});

2、除了这样使用以外，我们还有另一种方法实现数据的监听：

vm.$watch('login_phone',function(newVal,oldVal){
	//需要做的事
})

上面是声明在Vue实例外的一个监听事件，通过第一个参数绑定监听的变量，和第二个回执函数来操作数据更新前后的值来进行操作。

标签：Vue,color,watch,js,phone,login,data,监听
来源： https://blog.csdn.net/weixin_44296929/article/details/106617785

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。