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验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
javascript RegExp 使用说明
May 21 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
vue实现标签云效果的示例
Nov 09 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实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP7 其他修改
2021/03/09 PHP
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python深入学习之闭包
2014/08/31 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
深入浅析Python中的yield关键字
2018/01/24 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
鲁迅故居导游词
2015/02/05 职场文书
中学教师个人总结
2015/02/10 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
MSSQL基本语法操作
2022/04/11 SQL Server