vue计算属性get和set用法示例


Posted in Javascript onFebruary 08, 2019

本文实例讲述了vue计算属性get和set用法。分享给大家供大家参考,具体如下:

计算属性是什么:vue文档里是这么说的,模板中绑定太多的逻辑会让模板过重且难以维护。

换句话说,就是可以自己设置值(b值),这个值和data下定义的值(a值)存在某些关系,b的值是基于a的值,通过某些逻辑产生出来的值,b值可以直接拿到template里去用。当a的值发生变化的时候,b的值会跟着变化。就是计算属性中的默认值get。那set又是什么鬼?

b的值是基于a的变化而变化的,那么直接修改b的值的时候,会怎么样?这里会走进set方法里去。

总之一条:b的值始终是依赖a的值存在和变化的。最后渲染出来的a为100,b为110

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue计算属性get和set</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <p>a的值是:{{a}}</p>
    <p>b的值是:{{b}}</p>
    <button @click="change">按钮</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data:{
        a:1
      },
      computed: {
       b: {
        // getter
        get: function () {
         return this.a + 10
        },
        // setter
        set: function (val) {
          this.a = val
        }
       }
      },
      methods:{
       change() {
       this.b = 100
       }
      }
    })
  </script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

vue计算属性get和set用法示例

vue计算属性get和set用法示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
vue多次循环操作示例
Feb 08 #Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 #Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 #Javascript
Vue从TodoList中学父子组件通信
Feb 05 #Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 #Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 #Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 #Javascript
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python生成圆形图片的方法
2020/03/25 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python I/O与进程的详细讲解
2019/03/08 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
新三好学生主要事迹
2014/01/23 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
大学新学期计划书
2014/04/28 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2014年保卫工作总结
2014/12/05 职场文书
刮痧观后感
2015/06/05 职场文书
小学运动会通讯稿
2015/07/18 职场文书
MySQL分库分表详情
2021/09/25 MySQL