vue 计算属性和data_又学Vue系列：计算属性

最新推荐文章于 2023-04-16 18:39:35 发布

weixin_42512933

最新推荐文章于 2023-04-16 18:39:35 发布

阅读量554

点赞数

文章标签： vue 计算属性和data

本文链接：https://blog.csdn.net/weixin_42512933/article/details/112188956

版权

v-bind

v-bind绑定的属性值会和同名属性值合并。
值可以是一个methods方法，函数返回一个对象。
值可以是一个数组，数组中的值可以是字符串也可以是变量。

v-bind对象语法

key默认是字符串，无需加引号，不会被当做变量。value不加引号则是变量。

computed计算属性

当data需要经过变化才显示时，可以定义一个计算属性，该属性内部计算并返回，外部直接调用该属性即可。
有缓存，如果内容没有发生变化，则直接返回缓存数据，性能开销低。
如果同一个数据需要多个地方展示，推荐使用计算属性，它只会执行一次。如果使用methods，则会执行多次。

计算属性可以直接当做属性使用，无需加用圆括号。

<body>
<div id="app">
<h1>{{total}}h1>
div>
body>
<script>const app = new Vue({el: '#app',data: {books: [
				{id:1,name:'t1',price:100},
				{id:2,name:'t2',price:200},
				{id:3,name:'t3',price:301},
			]
		},computed:{total:function(){let result = 0;for (let i = 0; i < this.books.length; i++) {
					result += this.books[i].price
				}return result
			}
		}
	})script>

计算属性默认有get和set方法，完整格式如下。

computed:{
    fullName: {
        set: function(newValue){
            console.log(newValue)
        },
        get: function() {
            return 1
        }
    }
}

以下写法代表实现了get方法。

computed:{
    fullName: function () {
        return 1
    }
}

ES6补充知识

let/var

let是用于替代var的关键字，var存在一些设计上的错误。
let有块级作用域。
以为ES5之前if和for没有块级作用域的概念，所以必须借助function作用域解决应用外面相同变量名的问题。

没有块级作用域时，变量如果同名会互相影响。

【学习进度一览】

weixin_42512933

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 计算属性和data_又学Vue系列：计算属性

v-bindv-bind绑定的属性值会和同名属性值合并。值可以是一个methods方法，函数返回一个对象。值可以是一个数组，数组中的值可以是字符串也可以是变量。v-bind对象语法key默认是字符串，无需加引号，不会被当做变量。value不加引号则是变量。computed计算属性当data需要经过变化才显示时，可以定义一个计算属性，该属性内部计算并返回，外部直接调用该属性即可。有缓存，如...
复制链接

扫一扫