vue计算属性get和set用法示例
更新时间：2019年02月08日 11:55:49 作者：cofecode
这篇文章主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Vue.js之render函数使用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue3获取ref实例结合ts的InstanceType问题
这篇文章主要介绍了vue3获取ref实例结合ts的InstanceType问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了Vue+ElementUI之Tree的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue如何通过props方式在子组件中获取相应的对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue实现购物车场景下的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue脚手架项目创建步骤详解，文章讲解的很清晰，初学者可以跟着步骤学习下2021-03-03
这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue封装通过API调用的组件的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
双端Diff在可以解决更多简单Diff算法处理不了的场景，且比简单Diff算法性能更好。本文主要来和大家详细讲讲Vue2中的双端diff算法的实现与使用，需要的可以参考一下2023-02-02
最新评论