Vue基础之计算属性

2019-03-15 admin

适用场景

设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题。看下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>computed</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{message.split(' ').reverse().join(' ')}}
  </div>
  <script>
    new Vue({
      el: "#app",
      data () {
        return {
          message: 'Hello world!'
        }
      }
    })
  </script>
</body>
</html>

{{message.split(' ').reverse().join(' ')}}这个表达式共进行了三种操作,但看起来并不是很清晰,并且当我们想在其他地方也用到最终值时就需要复制、粘贴冗长的一大段代码,所以这时候计算属性就可以及时的发挥它巨大的作用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>computed</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{reverseText}}
    <hr>
    {{reverseText}}
    <hr>
    {{reverseText}}
  </div>
  <script>
    new Vue({
      el: "#app",
      data () {
        return {
          message: 'Hello world!'
        }
      },
      // 计算属性
      computed: {
        reverseText () {
          return this.message.split(' ').reverse().join(' ')
        }
      }
    })
  </script>
</body>
</html>

这时,我们就可以轻松应用结果在多个地方,而且代码还看起来更清晰了。

使用方法

在计算属性computed里可以完成各种复杂的逻辑(运算、函数调用),所有的计算属性以函数的形式写在computed里,最终返回计算结果,当message(data数据)有任何变化,计算属性会同时更新,并且更新视图。

每个计算属性都包括gettersetter,我们平时默认用到的是getter来读取。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>computed</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    姓:{{firstName}}
    <hr>
    名:{{lastName}}
    <hr>
    姓名:{{fullName}}
  </div>
  <script>
    new Vue({
      el: "#app",
      data () {
        return {
          firstName: '铁柱',
          lastName: '李'
        }
      },
      computed: {
        fullName: {
          // getter
          get: function() {
            return this.lastName + this.firstName
          },

          // setter
          set: function (data) {
            let name = data.split(' ')
            this.firstName = name[name.length - 1]
            this.lastName = name[0]
          }
        }
      }
    })
  </script>
</body>
</html>

默认调用时是用fullName的getter方法读取数据,想使用set方式时:

<div id="app">
  姓:{{firstName}}
  <hr>
  名:{{lastName}}
  <hr>
  姓名:{{fullName = '一 枚蛋Oops'}}
</div>

计算属性缓存

有人有可能会问,为什么不使用methods直接函数调用,这里就要区分一下他们的区别了

methods:只要重新渲染就会更新,函数就会执行。

computed:计算属性依赖的数据变化时,它才会重新取值,只要依赖数据不变化,它就不更新,可以缓存数据。

所以到底使用哪个属性是依据你的项目需求,看看你需不需要缓存。

以上是本期全部内容,欲知后事如何,请听下回分解<( ̄︶ ̄)↗[GO!]

[转载]原文链接:https://segmentfault.com/a/1190000018520049

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-57788.html

文章标题:Vue基础之计算属性

相关文章
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
回到顶部