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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
使用layer模态框给新页面传值的方法
Sep 27 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 正则 过滤html 的超链接
2009/06/02 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
如何用php获取文件名后缀
2013/06/09 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python数据结构之列表和元组的详解
2017/09/23 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
对孩子的寄语
2014/04/09 职场文书
民主评议党员总结
2014/10/20 职场文书
模范教师事迹材料
2014/12/16 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书