vue的计算属性computed

计算属性的应用场景

从已有的数据A中计算等到的新的数据B，使用计算属性

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

定义格式

计算属性与data和methods同级,格式如下:

{data(){},methods: {}// 声明计算属性computed: {//属性名字（计算属性名称）//属性的值（计算属性处理函数）计算属性名1 () {// 对依赖的数据进行处理，且进行returnreturn }，计算属性名2 () {// 对依赖的数据进行处理，且进行returnreturn }}
}

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

○ 对需要依赖的数据，进行逻辑上的处理
○ 处理完毕后，需要return出去，返回的值就是计算属性的值

使用格式

在两个地方使用：

模板
○ 用插值表达式 {{计算属性名}}
○ 用其它指令
在实例内
○ this.计算属性名

代码演示更直观,
颠倒字符串代码演示:

  <div id="app"><!-- 逻辑复杂 --><h3>{{msg.split('').reverse().join('')}}</h3><!-- 计算属性 和data类似--><h3>{{reverseMsg}}</h3></div><script src="./vue.js"></script><script>{data () {return { msg: 'hi vue' }},// 声明计算属性computed: {//属性名字（计算属性名称）//属性的值（计算属性处理函数）reverseMsg () {// 对依赖的数据进行处理，且进行returnreturn this.msg.split('').reverse().join('')}}})</script>

在模板中使用计算属性，和使用data的方式是一样的。

○ 虽然在计算属性中声明的是函数，但是在模板中使用，当中数据来使用，不需要加括号。

问：

当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：1.计算属性2.函数应该如何选择？

答：

● methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
● computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。
○ 计算属性会做缓存，提高渲染的性能。

计算属性的完整写法

计算属性也是变量, 如果想要给计算属性直接赋值, 需要使用完整写法=>开启读写模式

语法:

computed: {"属性名": {set(值){},get() {return "值"}}
}

经典场景,全选和反选

<template><div><span>全选:</span><inputtype="checkbox"v-model="isAll"/><button @click="fan">反选</button><ul><liv-for="(item, index) in arr":key="index"><inputtype="checkbox"v-model="item['checked']"/><span>{{ item["name"] }}</span></li></ul></div>
</template><script>
export default {data () {return {arr: [{name: "猪八戒",checked: false,},{name: "孙悟空",checked: false,},{name: "唐僧",checked: false,},{name: "白龙马",checked: false,},],}},methods: {// 方法实现fan () {this.arr.forEach((obj) => {obj.checked = !obj["checked"]})},},computed: {// 计算属性实现isAll: {set (val) {// 设置isAll的值的时候触发此方法, 传入要设置的值// val是全选框的true/false的值this.arr.forEach((obj) => {obj["checked"] = val})},get () {return this.arr.every((obj) => obj["checked"] === true)},},
//    isAll () {//      return this.arr.every((obj) => obj["checked"] === true)
//    }},
};
</script><style>
</style>

vue的计算属性computed相关推荐

Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分预计效果代码结果展示预计效果页面输入数学.物理.英语分数,自动计算出总分和平均分,并展示到界面,如下图所示代码 ...
关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
Vue初学——计算属性Computed和Methods
methods methods是一个vue对象中的属性,而在这个属性中,写的是种种要实现的方法. computed computed是一个属性,在属性中写的也是要实现的方法,那其中同方法一样的写法,总 ...
Vue之计算属性Computed
计算属性将被添加到Vue的实例中.计算属性内部的getter和setter函数内的this上下文将自动地绑定为Vue实例不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => ...
vue 计算属性和data_vue之watch和计算属性computed
区别一:watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组.computed可以监听很多个变量,但是这个变量一定是vue实例里面的. Vue 测试实例 - ...
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...