计算属性在js中的使用

js中可计算属性名

2019-08-02 17:09:20

js中有对象有两种属性...备注：在对象中，属性名永远都是字符串，如果你是使用了string以外的其他值作为属性名，那他也首先也会被转换成一个字符串如果你需要通过表达式来计算属性名，可以如下： var profix="fo...

js中有对象有两种属性访问语法
var myObject={
	a:2
}
myObject.a;
myObjetc["a"]

.a语法通常被称为"属性访问"

[”a“]语法通常被称为"键值访问"

备注：  在对象中，属性名永远都是字符串，如果你是使用了string以外的其他值作为属性名，那他也首先也会被转换成一个字符串

如果你需要通过表达式来计算属性名，可以如下：
var profix="foo"
		var myObject={
			[profix+"bar"]:"hello",
			[profix+"baz"]:"word"
		}
		console.log(myObject.foobar);
		console.log(myObject.foobaz);

ES6增加了可计算属性名，可以在文字形式中使用[]包裹一个表达式来当作属性名。

收起

展开全文

vue中的计算属性的使用和vue实例的方法示例
2020-11-29 12:51:31
本文介绍了vue计算属性的使用和vue实例的方法示例，分享给大家，具体如下： 计算属性 在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且...
收起

Vue.js学习笔记——3.计算属性computed的使用

2020-11-20 20:41:54

计算属性computed的使用计算属性的基本操作计算属性的复杂操作计算属性的setter和getter计算属性和methods的对比 计算属性的基本操作我们可以利用插值语法来显示data中的数据，但在某些情况，我们可能需要对数据...


计算属性computed的使用
一、计算属性的基本操作
二、计算属性的复杂操作
三、计算属性的setter和getter
四、计算属性和methods的对比

一、计算属性的基本操作
我们可以利用插值语法来显示data中的数据，但在某些情况，我们可能需要对数据进行一些转化或多个数据结合起来进行显示，如：

data中有firstName和lastName两个属性，需要结合成fullName进行显示

单纯使用插值语法会让代码语法十分繁琐，这时我们就可以使用计算属性computed

举例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!-- 插值语法 -->
  <h2>{{firstName}} {{lastName}}</h2>
  <!-- 调用方法 -->
  <h2>{{getFullName()}}</h2>
  <!-- 计算属性 -->
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:"Lebron",
      lastName:"James"
    },
    computed:{
      fullName:function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods:{
      getFullName:function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>
</body>
</html>

执行结果：



计算属性一般直接当作一个属性使用，在命名时相比较methods一般不取动词，并且计算属性在使用时后面不需要加（）
二、计算属性的复杂操作
举例：将books数组中每个对象内的price相加再输出
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      books:[
        {id:110,name:'高等数学',price:100},
        {id:111,name:'线性代数',price:130},
        {id:112,name:'概率论与数理统计',price:125},
        {id:113,name:'微积分与数学模型',price:95}
      ]
    },
    computed:{
      totalPrice:function () {
        let result = 0
        for (let i = 0;i < this.books.length;i ++){
          result += this.books[i].price
        }
        return result
      }
    }
  })
</script>
</body>
</html>

执行结果：



利用计算属性我们可以对数据进行一些复杂的计算或组合后再显示到页面中
三、计算属性的setter和getter
每个计算属性都包含有一个setter和一个getter，一般情况下我们只使用它的getter方法，而setter方法被省略，在某些需要setter的情况下我们也可以提供一个setter方法

举例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 计算属性 -->
  <h2>{{fullName1}}</h2>
  <h2>{{fullName2}}</h2>
  <h2>{{fullName3}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:"Lebron",
      lastName:"James"
    },
    computed:{
      // 1.计算属性完整形式
      fullName1:{
        set:function () {

        },
        get:function () {
          return this.firstName + ' ' + this.lastName
        }
      },
      // 2.一般没有set方法，set方法省略成只读属性，属性名后面直接跟get方法的function
      fullName2:function () {
        return this.firstName + ' ' + this.lastName
      },
      // 3.具体实现set方法
      fullName3:{
        set:function (newValue) {
          console.log('------',newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get:function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    }
  })
</script>
</body>
</html>

执行结果：



计算属性的set方法在设置计算属性的值的时候才会调用，在开发过程中很少使用set方法，一般简写成例子中fullName2的形式；

在fullName3中实现了set方法，作用是当设置fullName3的值时，将传入的值打印出来，并用split（）按空格分割存入数组names中，并将names[0]和names[1]传给firstName和lastName



这里将fullName3的值设置为’kobe bryant’，调用了set方法改变了firstName和lastName的值，所以3个h2元素的值也动态改变
四、计算属性和methods的对比
methods和computed看起来都能实现相似的功能，但他们有个根本区别：计算属性会进行缓存，如果多次使用，计算属性只会调用一次，大大提升了效率

举例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 调用方法 -->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <!-- 计算属性 -->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:"Lebron",
      lastName:"James"
    },
    computed:{
      fullName:function () {
        console.log('computed');
        return this.firstName + ' ' + this.lastName
      }
    },
    methods:{
      getFullName:function () {
        console.log('methods');
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>
</body>
</html>

执行结果：



可以看到computed和methods都使用了4次但控制台显示computed只调用了一次，只有当我们改变了data中的值computed才会再次调用。

当要对数据进行多次for循环时，若使用methods则每调用一次就会执行一次for循环，而computed只用执行一次，大大提升了效率

收起

展开全文

Vue.js 计算属性
2020-12-14 04:44:51
计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1 {{ message.split('').reverse().join('') }} 实例 1 中模板变的很复杂起来，也不容易看懂理解。接下来我们看看使用了计算...
收起

Vue.js计算属性

千次阅读 2016-07-27 17:11:36

Vue.js计算属性在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。...

Vue.js计算属性

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
基础例子
<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})
结果：
a=1, b=2
这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。
console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3
你可以打开浏览器的控制台，修改 vm。vm.b 的值始终取决于 vm.a 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a，因此当 vm.a 发生改变时，依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
计算属性 vs. $watch
Vue.js 提供了一个方法 $watch，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子：
<div id="demo">{{fullName}}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})
上面代码是命令式的重复的。跟计算属性对比：
var vm = new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
这样更好，不是吗？
计算 setter
计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...
现在在调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和vm.lastName 也会有相应更新。
关于计算属性背后的原理和技术细节详见计算属性的奥秘。

收起

展开全文

Vue.js计算属性和侦听属性

2018-12-08 11:30:36

文章目录一、计算属性1.1、计算属性的使用1.2、计算属性结果是被缓存的1.3、计算属性的getter和setter二、侦听属性更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页一、计算属性 1.1、计算属性的...


文章目录
一、计算属性
1.1、计算属性的使用
1.2、计算属性结果是被缓存的
1.3、计算属性的getter和setter
二、侦听属性


更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

一、计算属性
1.1、计算属性的使用
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

为了处理复杂的逻辑处理和计算操作，Vue.js为实例提供了一个计算属性computed用于处理。所以上述的代码可以写成：
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

1.2、计算属性结果是被缓存的
我们不一定需要在vue实例中使用计算属性，我们也可以使用methods属性来响应一个反转字符串：
<p>Reversed message: "{{ reversedMessage() }}"</p>

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

它们都能实现一样的结果，但是它们也有不同点：

计算属性获得的结果是被缓存的，当结果依赖的数据改变时，结果缓存才会被更新，而通过表达式调用的结果会在每次请求时都刷新。
为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
1.3、计算属性的getter和setter
计算属性中默认提供了一个getter
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

即以上代码的真正写法是：
computed: {
    reversedMessage: function () {
    	get: {
   		   return this.message.split('').reverse().join('')
    	}
    }
  }

如果有需要，我们还可以为计算属性中添加setter方法：
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

之后可以通过vm.fullName去调用setter方法。
二、侦听属性
Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="vue13">
		<p v-on:click='counter++'>点我计数：{{counter}}</p>
		<p>旧值：{{oldCounter}} | 新值：{{newCounter}}</p>
	</div>

new Vue({
	el: '#vue13',
	data: {
		counter: 1,
		oldCounter: 1,
		newCounter: 1
	},
	watch: {
		counter: function(newMessage,oldMessage){
			this.newCounter = newMessage;
			this.oldCounter = oldMessage;
		},
		oldCounter: function(newMessage,oldMessage){

		},
		newCounter: function(newMessage,oldMessage){

		}
	}
})

收起

展开全文

vue

vue 计算属性和data_Vue.js 计算属性computed
2021-01-12 02:42:08
因此，为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。{{message.split('').reverse().join('')}}在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个...
收起
vue.js计算属性(computed)、方法(methods)、侦听属性(watch)的区别与使用场景
2019-12-24 04:06:50
我们可以像绑定普通属性一样在模板中绑定计算属性。 计算属性是基于它们的依赖进行缓存的。也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着，上述案例中，只要 message 还没有发生改变，...
收起
javascript vue
vue.js计算属性
2020-02-20 17:57:17
计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子： {{ message.split('').reverse().join('') }} 实例 1 中模板变的很复杂起来，也不容易看懂理解。接下来我们看看使用了计算属性的...
收起
Vue.js 计算属性computed和methods的区别
2018-08-01 14:00:00
在vue.js中，有methods和computed两种方式来动态当作方法来用的如下：两种方式在这种情况下的结果是一样的写法上的区别是computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样...
收起
vue 计算属性和data_Vue.js 计算属性
2021-01-12 02:42:10
computed vs method：在vue.js中，有methods和computed两种方式来动态当作方法来用的。1.首先最明显的不同就是调用的时候，methods要加上()2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 ...
收起
vue.js入门教程之计算属性
2020-12-28 22:36:01
前言 计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会...如果需要多于一个表达式的逻辑，应当使用计算属性。来看这一个简单的例子 a={{ a }}, b={{ b }} var
收起
Vue中的计算属性与监视属性
2020-04-09 21:04:58
vue.js中的计算属性与监视 1. 前言在本人看来,Vue.js的计算属性是我目前见过最棒的东西，该属性很好的让我们不再关注视图层，只关注代码的逻辑即可，至于数据如何展现则只需由Vue负责，不需要我们的参与。除此之外...
收起
vue-async-computed, Vue.js的异步计算属性.zip
2019-09-17 18:24:44
vue-async-computed, Vue.js的异步计算属性 vue-async-computed 这里插件的为Vue兼容！可以使用这个插件在Vue中计算出异步计算的属性。不使用这里插件，你无法执行这里操作：new Vue({ data: { us
收起
Vue.js 计算属性是什么
2018-11-23 17:19:00
Vue.js 计算属性是什么一、总结一句话总结：模板表达式维护在模板中表达式非常便利...如果需要多于一个表达式的逻辑，应当使用计算属性。 1、为什么会有计算属性？模板表达式维护在模板中表达式...
收起
FileReader()在js中的使用
2021-01-05 14:47:53
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。生成FileReader对象 // 生成FileReader对象 var fileR = new ...
收起
javascript
Vue.js 计算属性computed
2017-11-21 19:33:00
计算属性 通常我们会在模板中绑定表达式，模板是用来描述...因此，为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。 1 2 3 <divid="example"> {{message.split('').r...
收起
4.vue中的计算属性
2021-01-08 12:56:45
1.计算属性： ...3.将v-for和v-if一起使用，在渲染列表是，根据v-if指令的条件判断来过滤列表中不满足条件的列表项，实际上这个功能也可以使用计算属性来完成 <!DOCTYPE html> <html> <head.
收起
vue
vue-async-computed：Vue.js的异步计算属性-源码
2021-02-06 10:35:23
使用此插件，您可以在Vue中具有异步计算的计算属性。如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
收起
vue.js 计算属性$watch
千次阅读 2016-10-31 19:29:34
计算属性 在模板中绑定表达式是非常便利的，但是他们实际上只用于简单的操作...如果需要多于一个表达式的逻辑，应当使用计算属性。基础例子 a={{a}},b={{b}} var vm=new Vue({ el:'#example', data:{a:
收起
继续记录Vue.js 计算属性
2020-07-08 10:15:18
计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 尝试一下 » 实例 1 中模板变的很复杂起来...
收起
vue
Vue.js计算属性computed与watch（5）
2020-12-29 04:27:29
如果需要多于一个表达式的逻辑，应当使用**计算属性**。 Vue实例的computed的属性原始的信息{{message}} 计算后的信息{{ComputedMessage}} js代码 var myVue = new Vue({ el: .test, data: {
收起
【Vue.js】- 计算属性
2017-06-20 13:53:15
计算属性在处理一些复杂逻辑时是很有用的。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当...
收起
vue修改计算属性的值_关于 Vue 中计算与侦听属性的一些思考
2020-11-20 10:06:25
本文来源于「Vue虚拟实验室」，作者·张家博，本文作者写的比较用心在学习 Vue.js 的计算属性和侦听器一节时，官方文档中有不少无法理解透彻的知识点，例如：1. 到底 computed，methods，watch 的关系和区别在哪里？...
收起
Vue.js 计算属性(computed)
2019-04-16 15:58:00
如果在模板中使用一些复杂的表达式，会让模板显得过于繁重，且后期难以维护。对此，vue.js 提供了计算属性（computed），你可以把这些复杂的表达式写到里面。实例 1 <!DOCTYPE html> <html> <...
收起

js中可计算属性名

vue中的计算属性的使用和vue实例的方法示例

Vue.js学习笔记——3.计算属性computed的使用

计算属性computed的使用

一、计算属性的基本操作

二、计算属性的复杂操作

三、计算属性的setter和getter

四、计算属性和methods的对比

Vue.js 计算属性

Vue.js计算属性

基础例子

计算属性 vs. $watch

计算 setter

Vue.js计算属性和侦听属性

文章目录

一、计算属性

1.1、计算属性的使用

1.2、计算属性结果是被缓存的

1.3、计算属性的getter和setter

二、侦听属性

vue 计算属性和data_Vue.js 计算属性computed

vue.js计算属性(computed)、方法(methods)、侦听属性(watch)的区别与使用场景

vue.js计算属性

Vue.js 计算属性computed和methods的区别

vue 计算属性和data_Vue.js 计算属性

vue.js入门教程之计算属性

Vue中的计算属性与监视属性

vue-async-computed, Vue.js的异步计算属性.zip

Vue.js 计算属性是什么

FileReader()在js中的使用

Vue.js 计算属性computed

4.vue中的计算属性

vue-async-computed：Vue.js的异步计算属性-源码

vue.js 计算属性$watch

继续记录Vue.js 计算属性

Vue.js计算属性computed与watch（5）

【Vue.js】- 计算属性

vue修改计算属性的值_关于 Vue 中计算与侦听属性的一些思考

Vue.js 计算属性(computed)

计算属性在js中的使用