5. Vue 计算属性使用经验总结

最新推荐文章于 2021-12-17 10:33:14 发布

白怀宇

最新推荐文章于 2021-12-17 10:33:14 发布

阅读量459

点赞数

分类专栏： Vue2 经验总结文章标签： vue

本文链接：https://blog.csdn.net/b342216980/article/details/106891291

版权

Vue2 经验总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue 计算属性使用经验总结

一、计算属性不能改变给外部变量进行赋值操作

在这里插入图片描述

二、计算属性与函数主要区别与应用

计算属性与函数主要区别
- 计算属性有缓存，返回值不变的情况下不用进行重新计算，函数每次都重新进行计算；
- 计算属性在数据改变时对返回值进行重新计算，函数则在函数调用时进行计算，数据改变时不自动计算；

计算属性主要应用

用于动态设置样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 计算属性使用经验总结</title>
</head>
<style>
	#app div{
		width: 100px;
		height: 100px;
	}
</style>
<body>

<div id="app">
	<button @click="changeColor">改变颜色</button>
	<div :style="divStyle">

	</div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	app = new Vue({
		data: {
			backgroundColor: 'green'
		},
		methods: {
			changeColor() {
				this.backgroundColor = 'blue'
			}
		},
		computed: {
			divStyle(){
				let style = {}
				style['background-color'] = this.backgroundColor
				return style
			}
		}
	}).$mount('#app')
</script>

</body>
</html>

白怀宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5. Vue 计算属性使用经验总结

Vue 计算属性使用经验总结一、计算属性不能改变给外部变量进行赋值操作二、计算属性与函数主要区别与应用计算属性与函数主要区别计算属性有缓存，返回值不变的情况下不用进行重新计算，函数每次都重新进行计算；计算属性在数据改变时对返回值进行重新计算，函数则在函数调用时进行计算，数据改变时不自动计算；计算属性主要应用用于动态设置样式<!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫