Vue——计算属性、属性监听器、过滤器

1.计算属性

new Vue({
    el:"",//关联界面元素
    data:{},//vm的数据源
    methods:{},//方法
    computed:{xx(){}} //xx就是一个计算属性 
})

写法类似于methods，用法和data一样

使用示例(购物车的总价运用了计算属性)：

	
		
		
		
		
	
	
		

			

				
{{e.name}}
				

					
					{{e.count}}
					

				
				
单价:￥{{e.price*(e.count)}}
			
			
总价:{{getallprice}}
		
		
	

 2.属性监听器

watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性

当侦听器监听的属性发生变化时,就会调用watch中对应的方法

2.1data数据里的属性是普通变量时

            {{name}}
            点击
 
 

 

 2.2 data数据里的属性是数组时

1.使用点语法修改数组值的时候，数组无法驱动页面刷新，但是数组的值改变了

2.想要修改数组的值并且驱动页面，只能通过Array.splice(index,count,新增元素)来实现

3.无法判断修改了数组里的哪个值，因此只能将新值都传进来

			{{age}}
			点击

 2.3 data数据里的属性是对象时

深度监听,超过一层对象,和数组一样，无法判定旧值，只能把新值都传进来    

			
		{{data.month}}		
		点击

2.4 监听器案例(汇率计算)

 

3.过滤器 

filter主要用于数据展示之前的处理

过滤器只能用在v-bind或者插值表达式中

过滤器：过滤的是data值 

			
			
			{{msg|woman(1)}}