计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

实例 1 中模板变的很复杂起来，也不容易看懂理解。

接下来我们看看使用了计算属性的实例：

<div id="app">

  <p>原始字符串: {{ message }}</p>

  <p>计算后反转字符串: {{ reversedMessage }}</p>

</div>

<script>

var vm = new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  },

  computed: {

    // 计算属性的 getter

    reversedMessage: function () {

      // `this` 指向 vm 实例

      return this.message.split('').reverse().join('')

    }

  }

})

</script>

实例 2 中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

methods: {

  reversedMessage2: function () {

    return this.message.split('').reverse().join('')

  }

}

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm = new Vue({

  el: '#app',

  data: {

    name: 'Google',

    url: 'http://www.google.com'

  },

  computed: {

    site: {

      // getter

      get: function () {

        return this.name + ' ' + this.url

      },

      // setter

      set: function (newValue) {

        var names = newValue.split(' ')

        this.name = names[0]

        this.url = names[names.length - 1]

      }

    }

  }

})

// 调用 setter， vm.name 和 vm.url 也会被对应更新

vm.site = '菜鸟教程 http://www.runoob.com';

document.write('name: ' + vm.name);

document.write('<br>');

document.write('url: ' + vm.url);

从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

　

8.Vue.js-计算属性的更多相关文章

  1. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  2. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  3. Vue.js 计算属性

    Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...

  4. vue.js计算属性 vs methods

    计算属性:Vue.js 模板内的表达式非常便利,但是缺点就是只能用于简单的运算,如果模板中有太多的逻辑运算会让模板不堪重负且难以维护.恰恰计算属性可以处理复杂的逻辑运算,也就是说对于任何复杂逻辑你都应 ...

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

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  6. Vue.js 计算属性的秘密

    计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...

  7. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  8. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  9. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

  10. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

随机推荐

  1. Go defer 原理和源码剖析

    Go 语言中有一个非常有用的保留字 defer,它可以调用一个函数,该函数的执行被推迟到包裹它的函数返回时执行. defer 语句调用的函数,要么是因为包裹它的函数执行了 return 语句,到达了函 ...

  2. Django 小实例S1 简易学生选课管理系统 3 创建用户模型(model)

    Django 小实例S1 简易学生选课管理系统 第3节--创建用户模型(model) 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 本文涉及到的新 ...

  3. 体验.NET Core使用IKVM对接Java

    前言 与第三方对接最麻烦的是语言不同,因语言不同内置实现相关标准加密算法还是略微有所差异,对接单点登录场景再寻常不过,由于时间紧迫且对接方使用Java,所以留给我对接开发和联调的时间本就不多,于是乎, ...

  4. Python--基本数据类型（可变/不可变类型）

    目录 Python--基本数据类型 1.整型 int 2.浮点型 float 3.字符串 str 字符串格式 字符串嵌套 4.列表 list 列表元素的下标位置 索引和切片:字符串,列表常用 5.字典 ...

  5. shell脚本训练

    *注:shell中的/data目录为自创练习目录 1,编写脚本systeminfo.sh,显示当前主机系统信息.包括主机名,IPV4地址,操作系统版本,内核版本,cpu型号,内存大小,硬盘大小 结果: ...

  6. [loj2469]最小方差生成树

    2018年论文题 约定:令点集$V=[1,n]$.边集$E=[1,m]$,记$m$条边依次为$e_{i}=(x_{i},y_{i},c_{i})$(其中$1\le i\le m$),将其按照$c_{i ...

  7. nginx得请求转发代码-将请求转发到网关

    首先:本地主机host更改成 192.168.111.1 gulimail.com 这样一访问网址就能映射到本地. 然后修改nginx得conf worker_processes 1; events ...

  8. vue指令v-for报错：Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue

    文件–>首选项–>设置–>在搜索框中输入:vetur.validation.template,取消勾选.

  9. ThinkPad笔记本外放没声音解决办法（不是驱动的原因）

    本人的本子是T480,自从装完Ubuntu系统之后W10系统就没有外放声音了,卸载Ubuntu之后还是没有声音,重装声卡驱动.重装系统之后依然无效. 我的解决办法是升级主板Bois,具体如下: 进入官 ...

  10. Pycharm整体缩进和减少缩进

    整体缩进:鼠标拉选住代码块,按下tab键. 反向缩进:鼠标拉选住代码块,按下shift+tab键.