vue 计算属性 方法 监听器 简单使用

vue简单入门

计算属性：可以传参数，set方法好像只能穿value

//计算属性传值
get:function(){
	return a
},
set:function(value){
	this.a=value;
}	

//闭包返回
test() {
 return function (index,value) {
        return this.b[index] = value;		//这种也可以传参 直接返回
	}
}

//比如要监听数组，可以用计算属性 返回你要监听的某个值的字符串拼接
computed:{
	PerCtn: function () {
	  	try {
	           var strL = "";
	             if (this.arr.length) {
	                 for (var v = 0; v < this.arr.length; v++) {
	                     strL += this.arr[v].data1.PerCtn + ",";
	                 }
	                 return strL.substring(0, strL.lastIndexOf(','));
	             }
	        } catch (err) {}
	},
}
 
watch:{
	PerCtn: {
	         handler: function (newval,oldval) {
	        	  conlose.log(newval,oldval) 
	        	  //监听后逻辑
	        	  
	              this.PerCtnfun(newval);  //调用mothods里的方法，
	         }
	},
}
methods:{
	PerCtnfun: function (value) {
	      for (var v = 0; v < this.arr.length; v++) {
	       		
	      }
	      return ...... 
	}
}

v-model: 双向绑定，可以绑定一个计算属性，绑定了可以给计算属性传值修改

	<iuput type="text" v-model="testaa(i)" ref="up1">
	testaa() {
	 return function (index) {
	 		var b[index].aa = this.$refs.up1[0]._value //是input里的value 可能要加try
	        return this.b[index].aa;
		}
	}
	
//也可以绑定一个方法
<iuput type="text" v-model="aafun(i,$event)">

//方法：
aafun: function (index，event) {
	//逻辑
	this.arr[index].aa = event.currentTarget.value;
		
	//也可以调用计算属性：
	var result = this.testaa = index; //传参
	
	return result;
}
	

@input 监听输入框

//testfun一个方法
<input type="text"  @keyup.enter="testfun" @input="testfun($event,i)">

监听器： 监听对象没问题，监听数组只能用计算属性 不然监听不到老值

watch: {
	//监听对象某个属性
 	'obj.a': {
	    handler(newval, oldval) {
	      conlise.log(newval,oldval);
	    },
    	immediate: true //立即去执行handler方法
    	deep: true //深度监听
    },
    
	//监听整个数组，不建议用
	arr:{
		 handler(newval, oldval) {
		     conlise.log(newval,oldval); //新值老值一样。
		 },
	   	deep: true //深度监听
	}
}

把json对象，数组清空：

//添加一个空数组用
var Data1 = {}, 
   for (var prop in app.arr[0].data1[0]) {
       Data1[prop] = "";
   }

axios: 基本用法：

var jsonarr = app.arr;
axios({
       method: 'post',
       url: '你的url',
       data: {
           jsonarr //后台用@RequestBody String data 接收 用gson转成对象
       }
       })
       .then(function (response) {
           success_prompt('保存成功', '1500');
       })
       .catch(function (error) {
           fail_prompt('保存失败', '1500');
       });
       



//多个并行连接
axios.all([getdata1(), getdata2()])
    .then(axios.spread(function (one, two) {
    	one.data; // 返回的数据
    	two.data;
	  	fail_prompt("成功","1500");
    })).catch(function (error) {
    	fail_prompt("失败","1500");
});


function getdata1() {
	//post会出问题不知道为啥
    return axios.get('你的url', {
            params: {
                mypars: parcode, //后台用String mypars,String pdate接收
                pdate: pardate
            } 
    });
};
function getdata2() {
    return axios.get('你的url', {params: {mypars: parcode, pdate: pardate} });
};

//springboot后台
//跨域
@RestController
@CrossOrigin(origins = "*", maxAge = -1)