computed属性

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<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>

</body>

</html>

效果：

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

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

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

computed vs methods

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

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

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

  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>

</div>

<script>

var vm = new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  },

  computed: {

    // 计算属性的 getter

    reversedMessage: function () {

      // `this` 指向 vm 实例

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

    }

  },

  methods: {

    reversedMessage2: function () {

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

    }

  }

})

</script>

</body>

</html>

效果:

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed setter

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

  <p>{{ site }}</p>

</div>

<script>

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);

</script>

</body>

</html>

效果：

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

VueJS计算属性: computed的更多相关文章

  1. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. vue从入门到进阶：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  3. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  4. vue2.0中的watch和计算属性computed

    watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...

  5. Vue教程：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  6. vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层

    有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...

  7. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 计算属性 computed

    计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...

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

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

随机推荐

  1. linux系统初始化——启动脚本是如何工作的

    启动脚本是如何工作的 Linux 使用的是基于 运行级(run-levels) 概念的称为 SysVinit 的专用启动工具.它在不同的系统上可能是完全不一样的,所以不能认为一个脚本在某个 Linux ...

  2. vue经验总结

    1. vue中获取dom节点时机 vue组件中获取dom节点一定要在mounted周期之后的下一次事件循环,包括 component.$refs,component.$el,component.$ch ...

  3. webstorm的stylus编译环境搭建

    http://www.cnblogs.com/pizitai/p/6186513.html

  4. 洛谷 [P3388] 割点模版

    tarjan 求无向图的割点 割点,即割去此点后原图可变为两个或多个独立的联通块 一个点 x 是割点,当且仅当存在一个x 的子节点 y ,使得 low[y] >= dfn[x] 对于根节点来说, ...

  5. HTML5 录音的踩坑之旅

    开篇闲扯 前一段时间的一个案子是开发一个有声课件,大致就是通过导入文档.图片等资源后,页面变为类似 PPT 的布局,然后选中一张图片,可以插入音频,有单页编辑和全局编辑两种模式.其中音频的导入方式有两 ...

  6. [LeetCode] Longest Substring Without Repeating Characters最长无重复子串

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  7. Servlet乱码解决

    后端收前端 1.post乱码 可以通过 request.setCharacterEncoding("utf-8");  这样在后端可以接收中文 2.get乱码(手动解决) 可以通过 ...

  8. duilib入门简明教程 -- VS环境配置(2) （转）

    原文转自:http://www.cnblogs.com/Alberl/p/3342030.html     既然是入门教程,那当然得基础点,因为搜索duilib相关资料时,发现有些小伙伴到处都是编译错 ...

  9. HDU5006 Resistance(高斯消元)

    给你一个复杂的网路图,然后告诉你s,t,求s,t的等效电阻.方法是设s的电势为1,t的电势为0.然后对于其它的每个点x,满足的是sigma(ux-uy)/R(x,y)(即对每个与x相连的节点y,电势差 ...

  10. 洛谷 P1372 又是毕业季I[数论/神坑规律题]

    题目描述 为了把毕业晚会办得更好,老师想要挑出默契程度最大的k个人参与毕业晚会彩排.可是如何挑呢?老师列出全班同学的号数1,2,……,n,并且相信k个人的默契程度便是他们的最大公约数(这不是迷信哦~) ...