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. 使用Google的Gson实现对象和json字符串之间的转换

    使用Google的Gson实现对象和json字符串之间的转换 需要gson.jar 1.JsonUtil.java package com.snail.json; import java.lang.r ...

  2. hdu 4293 区间DP

    /* 题目大意:n个人分成若干组,每个人都描叙他们组前面有多少人后面有多少人, 求说真话的人最多有多少个. 解题思路:把同一组的人数统计起来他们组前面有x人后面有y人, num[x+1][n-y]表示 ...

  3. Java语法糖（二）

    语法糖之四:内部类 内部类:顾名思义,在类的内部在定义一个类.内部类仅仅是编译时的概念,编译成字节码后,内部类会生成单独的Class文件. 四种:成员内部类.局部内部类.匿名内部类.静态内部类. 1. ...

  4. RocketMq使用注意事项

    Topic 一个Topic是一个主题.一个系统中,我们可以将消息划成Topic,这样,将不同的消息发送到不同的queue. Queue 一个topic下,我们可以设置多个queue,每个queue就是 ...

  5. 【CF1029B】Creating the Contest（贪心）

    题意: n<=2e5 思路:可以证明答案一定是极长的一段中取最大值 #include<cstdio> #include<cstring> #include<stri ...

  6. HTTP调试工具：Fiddler介绍

    原文发布时间为:2010-08-25 -- 来源于本人的百度文章 [由搬家工具导入] 这个工具我已经使用比较长时间了，对我的帮助也挺大，今天我翻译的微软的文章，让更多的朋友都来了解这个不错的工具，也是 ...

  7. Codeforces 920D Tanks

    题目链接 题意 有 \(n\) 个容积无限的水缸,初始时水量为\(a_1,a_2,...,a_n\),有一把容积为\(k\)的勺子,可以从一个水缸中舀水倒入另一个水缸中.问能否给出操作序列,使得最终某 ...

  8. GPIO和门电路

    1. GPIO 1.1 简介 GPIO, General Purpose I/O, 通用输入输出接口, 是最简单的数字输入输出引脚 - 作为输出可以有两种状态: 0和1 - 作为输入,它接收外面输入的 ...

  9. 解决mariadb数据库服务无法开启

    我的系统Manjaro linux,安装的数据库为mariadb 10.1 1.安装数据库 pacman -S mariadb 2.配置数据库启动环境: mysql_install_db --user ...

  10. 使用vim修改和查看16进制文件

    使用前的准备工作,如果没有安装,使用命令安装: pacman -S vim 使用vim的十六进制功能查看和编辑文本文件,创建测试文件,使用命令如下: vim test.txt 进入“插入”模式,使用命 ...