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

99. Vue 经验总结 专栏收录该内容
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
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值