vue 计算属性和方法

以你之姓@ 2021-07-24 23:36 523阅读 0赞

计算属性:
    
    	(1)与函数的区别:多次访问依赖性不变的计算属性会立即返回之前的计算结果,而调用方法将总会再次执行函数。
    		能监听对象内部属性的变化
    	(2)计算属性中的方法不能作为事件的回调函数
    	(3)scripts内都是通过this.属性名调用data中的内容,而template中直接属性名调用
    	
    	(4)计算属性可配合指令直接使用,如计算属性返回一个数组, v-for='(item,index) in 计算属性名'	
    
    	使用:
    
    	1、与data同级
    		computed:{
    			xx(){
    				...
    			},
    			xx:(vm)=>{	当使用箭头函数,this不会指向这个组件的实例,通过第一个参数来使用组件实例
    				vm.data
    			},
    			计算属性还可以设置get和set方法,在进行调用或赋值时,自动调用set和get方法
    			xx:{
    					get:function(){return xx},
    					set:function(value){xx=value}
    			}
    		}
    	2、调用计算属性
    		在template中
    		{
       {函数名}}
    
    methods方法:
    	(1)与data同级的methods中声明
    		methods:{
    			es6语法或键值对函数
    		}
    	(2)调用方法
    		在template中
    		{
       {函数名()}}

代码示例：

<template lang='html'>
    	<div>
    		{ { getMsg}}
    		{ { getMsg2()}}
    	</div>
    
    </template>
    
    <script>
    export default{ 
    	name:'vuedemo',
    	data()
    	{ 
    		return{ 
    			msg:'hello world'
    		}
    	},
    	//计算属性
    	computed:{ 
    	//如果数据未被改变,则只会一次
    		getMsg()
    		{ 
    			return this.msg.split('').reverse().join('');
    		}
    	},
    	//方法
    	methods:{ 
    		getMsg2()
    		{ 
    			return this.msg.split('').reverse().join('-');
    		}
    	}
    	
    }
    </script>
    
    <style lang='css'>
    </style>