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对象模型-执行模型
Apr 28 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
微信小程序实现首页弹出广告
Dec 03 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实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
浅析Django中关于session的使用
2019/12/30 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
四年大学生活的自我评价范文
2014/02/07 职场文书
美术学专业求职信
2014/07/23 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
小学班级管理心得体会
2016/01/07 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis