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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
基于文本的留言簿
2006/10/09 PHP
global.php
2006/12/09 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
竞聘书格式及范文
2014/03/31 职场文书
审计专业自荐信范文
2014/04/21 职场文书
优秀语文教师事迹
2014/05/18 职场文书
找规律教学反思
2016/02/23 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js