亲宝软件园·资讯

展开

Vue监听

​ 默默的成长   ​ 人气:0

前言

过滤器

局部过滤器代码

局部⾃定义过滤器:关键用到的是使⽤filters属性,第⼀种和第⼆种声明⽅式都可以去实现。

      Vue.component('myLi',{
			template:`
			`
		});
               var App={
			data(){
				return{
					price:0,
					msg:'hello filter'
				}
			},
			template:`
			<div>
			 <input type='number' v-model='price'  />
			 <h3>{{price | myCurrentcy}}</h3>
			 <h4>{{msg |myReverse 	 }}</h4>
			</div>
			`,
			filters:{
				//  声明过滤器
				myCurrentcy:function(value){
					return "¥"+value
				}
			}
		};
		
		new Vue({
			el:'#app',
			components:{
				App,
			},
			template:`<App/>`
		})            

全局过滤器

优点:在项目中经常使用过滤器对数据进行格式化后显示在页面上,比如日期格式转化,数值转换成状态文字等过滤器,如果在每个.vue页面都复制同一个过滤器进行使用,虽然是没问题,但是如果过滤器方法中,需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改,既费时又费力,所以为了项目维护,可以优先考虑定义全局过滤器

全局过滤器代码:

    Vue.filter('myReverse',function(value){
			return value.split('').reverse().join('');
			
		});`

watch监听

vue提供了侦听属性watch,可以很好的观察和侦听vue实例响应数据的变化。

基本的数据类型:

简单监听

通过watch方法:方法里有(新值,旧值)用来监听 也可添加条件,当新值等于一个值时,输出其他值。*

  <input type="text"  v-model="msg">
  	<h3>{{msg}}</h3>
  new Vue({
  		el:'#app',
  		data(){
  			return{
  			msg:'',
  			stus:[{name:'jack'}]
  			}
  		},
  		watch:{
  			msg:function(newV,oldV){
  				console.log(newV,oldV);
  				if(newV ==='sir'){
  					console.log('sir来了')
  				}
  			}  

复杂监听

对于复杂的监听事件 使用stus进行深度监听*

	<button @click="stus[0].name='rose'">改变 </button>
			<h4>{{stus[0].name}}</h4>
  new Vue({
				el:'#app',
				data(){
					return{
					msg:'',
					stus:[{name:'jack'}]
					}
				},
	
					 // 监听复杂数据类型 object array 深度监听	
					stus:{
						deep:true,//深度监听
						handler:function(newV,oldV){
							console.log(newV[0].name);
						}
					}
				}	

加载全部内容

相关教程
猜你喜欢
用户评论