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的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
使用python实现rsa算法代码
2016/02/17 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Python项目打包成二进制的方法
2020/12/30 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
公路绿化方案
2014/05/12 职场文书
精神病医院见习报告
2014/11/03 职场文书
python 模块重载的五种方法
2021/04/24 Python
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python