精华内容
下载资源
问答
  • 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实例的方法示例,分享给大家,具体如下: 计算属性 模板表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。模板放入太多的逻辑会让模板过重且...
  • 计算属性computed的使用计算属性的基本操作计算属性的复杂操作计算属性的setter和getter计算属性和methods的对比 计算属性的基本操作 我们可以利用插值语法来显示data中的数据,但某些情况,我们可能需要对数据...

    一、计算属性的基本操作

    我们可以利用插值语法来显示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>
    

    执行结果:
    setter和getter
    计算属性的set方法在设置计算属性的值的时候才会调用,在开发过程中很少使用set方法,一般简写成例子中fullName2的形式;
    在fullName3中实现了set方法,作用是当设置fullName3的值时,将传入的值打印出来,并用split()按空格分割存入数组names中,并将names[0]和names[1]传给firstName和lastName
    调用set方法
    这里将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>
    

    执行结果:
    计算属性和methods的对比
    可以看到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 也会有相应更新。

    关于计算属性背后的原理和技术细节详见计算属性的奥秘

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


    更多关于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){
    
    		}
    	}
    })
    

    在这里插入图片描述

    展开全文
  • 因此,为了简化逻辑,当某个属性值依赖于其他属性值时,我们可以使用计算属性。{{message.split('').reverse().join('')}}这种情况下,模板不再简单和清晰。实现反向显示 message 之前,你应该确认它。这个...
  • 我们可以像绑定普通属性一样模板绑定计算属性计算属性是基于它们依赖进行缓存。也就是说,计算属性只有相关依赖发生改变时才会重新求值。这就意味着,上述案例,只要 message 还没有发生改变,...
  • vue.js计算属性

    2020-02-20 17:57:17
    计算属性在处理一些复杂逻辑时是很有用。 可以看下以下反转字符串例子: {{ message.split('').reverse().join('') }} 实例 1 模板变很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性...
  • vue.js中,有methods和computed两种方式来动态当作方法来用 如下: 两种方式这种情况下结果是一样 写法上区别是computed计算属性的方式用属性时不用加(),而methods方式在使用时要像方法一样...
  • computed vs method:vue.js中,有methods和computed两种方式来动态当作方法来用。1.首先最明显不同 就是调用时候,methods要加上()2.我们可以使用 methods 来替代 computed,效果上两个都是一样,但是 ...
  • 前言 计算属性是用来声明式描述一个值依赖了其它值。当你模板里把数据绑定到一个计算属性上时,Vue 会...如果需要多于一个表达式逻辑,应当使用计算属性。 来看这一个简单例子 a={{ a }}, b={{ b }} var
  • vue.js中的计算属性与监视 1. 前言 本人看来,Vue.js的计算属性是我目前见过最棒的东西,该属性很好的让我们不再关注视图层,只关注代码的逻辑即可,至于数据如何展现则只需由Vue负责,不需要我们的参与。除此之外...
  • 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 对象允许Web应用程序异步读取存储用户计算机上文件(或原始数据缓冲区)内容,使用 File 或 Blob 对象指定要读取文件或数据。 生成FileReader对象 // 生成FileReader对象 var fileR = new ...
  • 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具有异步计算的计算属性。 如果不使用此插件,则无法执行以下操作: 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:
  • 计算属性在处理一些复杂逻辑时是很有用。 可以看下以下反转字符串例子: 实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 尝试一下 » 实例 1 模板变很复杂起来...
  • 如果需要多于一个表达式逻辑,应当使用**计算属性**。 Vue实例computed属性 原始信息{{message}} 计算后信息{{ComputedMessage}} js代码 var myVue = new Vue({ el: .test, data: {
  • 【Vue.js】- 计算属性

    2017-06-20 13:53:15
    计算属性在处理一些复杂逻辑时是很有用。 模板是为了描述视图结构。在模板放入太多逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式逻辑,应当...
  • 本文来源于「Vue虚拟实验室」,作者·张家博,本文作者写比较用心学习 Vue.js 的计算属性和侦听器一节时,官方文档有不少无法理解透彻知识点,例如:1. 到底 computed,methods,watch 关系和区别哪里?...
  • 如果模板中使用一些复杂表达式,会让模板显得过于繁重,且后期难以维护。对此,vue.js 提供了计算属性(computed),你可以把这些复杂表达式写到里面。 实例 1 <!DOCTYPE html> <html> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 518
精华内容 207
关键字:

计算属性在js中的使用