井井客

搜索

【VUE实例】vue2中watch数组对象查看新旧值

在vue2中使用watch对象组成的数组时,遇到一个问题,就是它的新旧值是一样的。这时就需要配合计算属性来一起使用了。

【VUE实例】vue2中watch数组对象查看新旧值

根据我自己的项目需求,思路就是先做一个计算属性,返回一个重新整理后的对象,再监听这个对象,打开deep:true(观察对象内的属性变化)。可以发现这时候返回的新旧值就是有区别的了。然后再接着去进行其它的接下来的操作就可以了。

我就直接贴代码了:

<template>
 <div class="container">
  <template v-for='(data,index) of datas'>
   <p class="listTop"><span class="col3">{{data.tit}}</span><template v-if='data.num != 100'>(还可输入{{data.num}}字)</template></p>
   <div class="feedBack">
    <div class="feed-text feed-mini" :class='{ col5 : data.def!==data.txt }'>
     <textarea class="limitFeed" @focus='textFocus(index)' @blur='textBlur(index)' v-model.tirm='data.txt'></textarea>
    </div>
   </div>
  </template>
 </div>
</template>
<script>
 export default {
     data () {
         return {
             datas:[
              {tit:'我的简介', txt:'',num:100,def:'请简单介绍您的基本情况。例如:本人在浙江杭州上班,从事的行业是互联网行业。(字数100字以内)'},
              {tit:'我的还款能力',txt:'',num:100,def:'请简单介绍您的还款能力。例如:本人在公司任职的岗位是java开发,月收入稳定,能按时归还借款。(字数100字以内)'},
              {tit:'本次申请借款的用途',txt:'',num:100,def:'请介绍本次申请借款的用途。例如:本次申请借款主要是因为新家装修,急需用钱。(字数100字以内)'},
             ]
         }
     },
     methods :{
       textFocus(i){
        //获取焦点时
        if(this.datas[i].txt == this.datas[i].def)  this.datas[i].txt = '';
       },
       textBlur(i){
        //失去焦点时
        if(this.datas[i].txt == '') this.datas[i].txt = this.datas[i].def;;
       },
       changeText(i){
        //如果当前textarea值不等于默认值的话-->限止字母在100字内
    	if(this.datas[i].txt.length >100 ){
     		this.datas[i].txt = this.datas[i].txt.substring(0,100);
    	}else if(this.datas[i].txt == this.datas[i].def){
     		this.datas[i].num = 100;
    	}else{
     		this.datas[i].num = (100-this.datas[i].txt.length);
    	}
       }
     },
     computed:{
      dataRest:function(){
       //计算返回一组新数据格式-->{'0':'xxx','1':'xxx','2':'xxx'}<--[模拟索引号]]
       var obj = {};
       for(var i = 0; i < this.datas.length; i++) obj[i]=this.datas[i].txt;
       return obj;
      }
     },
     watch:{
      dataRest:{
       handler:function(nowVal,oldVal){
        //观擦计算返回的新数据-->对比新旧值返回差异的[“索引号”]
        for(var i = 0; i < this.datas.length; i++){
         if(nowVal[i] != oldVal[i])  this.changeText(i);
        }
       },
       deep:true
      }
     },
     created:function(){
   for(var i=0; i < this.datas.length; i++) this.datas[i].txt = this.datas[i].def; //为textarea赋默认值
     }
 }
</script>

我在代码中新建了一下dataRest的计算属性,它帮我将datas数据,整理成{'0':'xxx','1':'xxx','2':'xxx'}这样格式的一个对象,其中属性是为了模似索引号的,后期会用到。然后在watch中,观察dataRest,当新旧值发生变化时,跟踪它的具体属性,找到“索引号”,再去changeText函数中,将索引号传递进去后进行相应的操作就可以了。

效果图如下:

【VUE实例】vue2中watch数组对象查看新旧值示例图

这么操作的目的就是在这三个输入框中输入文字同时进行判断,第一个需求是字数限制在100字,第二个需求是显示还能显示多少字。

官网API地址:http://cn.vuejs.org/v2/api/#vm-watch

情况就是这样了~

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:【VUE实例】vue2中watch数组对象查看新旧值
本文链接:http://www.jingjingke.com/c/13253.html

上一篇:offsetTop差一个相对定位结果大不同
下一篇:五分钟进入browsersync的世界

文章分类

相关阅读

随便看看