关键词搜索

源码搜索 ×
×

Vue 计算属性

发布2023-04-14浏览265次

详情内容

Vue 计算属性

定义:要用的属性不存在,要通过已有的属性计算得来
原理:底层借助了Object.defineproperty方法提供的getter和setter
内部有缓存机制

<script>
	new Vue({
		el:"#root",
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed:{
			fullName:{
				//get有什么用?
				//当有人读取fullName时,get就会被调用,返回值作为fullName的值
				//get什么时候被调用?
				//1.初次读取fullName时 2.所依赖的数据发生变化时
				get(){
					return this.firstName + '-' + this.lastName
				},
				//set什么时候被调用?
				//当fullName被修改时
				set(value){
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</script>

    计算属性简写(只考虑读取数据,不考虑修改数据才可以使用简写)

    <script>
    	new Vue({
    		el:"#root",
    		data:{
    			firstName:'张',
    			lastName:'三'
    		},
    		computed:{
    			fullName(){
    				return this.firstName + '-' + this.lastName
    			}
    		}
    	})
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    相关技术文章

    点击QQ咨询
    开通会员
    返回顶部
    ×
    微信扫码支付
    微信扫码支付
    确定支付下载
    请使用微信描二维码支付
    ×

    提示信息

    ×

    选择支付方式

    • 微信支付
    • 支付宝付款
    确定支付下载