vue计算属性

计算属性：

         1. 定义：要用的属性不存在，要通过已有的(vue中的)属性计算得来
        2. 原理: 底层使用了Object.definedproperty方法提供的getter和setter
        3. get函数什么时候执行？
            1. 初次读取时会执行一次
            2. 当依赖的属性数据发生改变时会被再次调用
        4. 优势：与methods实现相比，内存中有缓存机制，效率高，调试方便
        5. 备注：
            1. 计算属性最终会出现在vm上，直接读取即可
            2. 如果计算的属性要被修改，那必须写set函数去响应修改，且set中要引起依赖的数据发生改变

实例

 <body>
<div id="root">
        <h1>你好，{{name}}</h1>
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        全名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false;
        let vm = new Vue({
            el:"#root",
            data:{
                name:"彭可选1",
                firstName: "张1",
                lastName: "三1"
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName+"-"+this.lastName;
                    },
                    set(value){
                        let arr = value.split("-");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>
</body>

计算属性的简写

在计算属性`只考虑读取，不考虑修改`的时候才能使用简写

 computed:{
//简写
fullName(){
    return this.firstName+"-"+this.lastName;
}

posted @ 2022-07-16 13:26 小罗要有出息阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue基础知识

· Vue的数据代理原理

· Vue计算属性

· vue计算属性，计算属性简写

· Vue 计算属性

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

vue计算属性

计算属性：

实例

计算属性的简写

在计算属性`只考虑读取，不考虑修改`的时候才能使用简写

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	1. 定义：要用的属性不存在，要通过已有的(vue中的)属性计算得来
	2. 原理: 底层使用了Object.definedproperty方法提供的getter和setter
	3. get函数什么时候执行？
	1. 初次读取时会执行一次
	2. 当依赖的属性数据发生改变时会被再次调用
	4. 优势：与methods实现相比，内存中有缓存机制，效率高，调试方便
	5. 备注：
	1. 计算属性最终会出现在vm上，直接读取即可
	2. 如果计算的属性要被修改，那必须写set函数去响应修改，且set中要引起依赖的数据发生改变

	<body>
	<div id="root">
	<h1>你好，{{name}}</h1>
	姓：<input type="text" v-model="firstName">
	名：<input type="text" v-model="lastName">
	全名：<span>{{fullName}}</span>
	</div>
	<script>
	Vue.config.productionTip = false;
	let vm = new Vue({
	el:"#root",
	data:{
	name:"彭可选1",
	firstName: "张1",
	lastName: "三1"
	},
	computed:{
	fullName:{
	get(){
	return this.firstName+"-"+this.lastName;
	},
	set(value){
	let arr = value.split("-");
	this.firstName = arr[0];
	this.lastName = arr[1];
	}
	}
	}
	})
	</script>
	</body>

	computed:{
	//简写
	fullName(){
	return this.firstName+"-"+this.lastName;
	}

计算属性：

实例

计算属性的简写

在计算属性只考虑读取，不考虑修改的时候才能使用简写

公告

搜索

常用链接

随笔档案

在计算属性`只考虑读取，不考虑修改`的时候才能使用简写