vue计算属性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测试上述代码，可得如下运行结果：
-
计算属性 在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 messag
-
1. 前言 本节介绍计算属性的使用方法。包括什么是计算属性，计算属性的特点，还有计算属性和方法在实际使用中的区别。其中重点掌握计算属性和方法的区别，了解它之后，才能在日常工作中灵活使用计算属性和方法。 2. 慕课解释 计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。— 官方定义 计算属性实际上是一个方法，它可以完成各种复杂的逻辑，包括运算、函数
-
本文向大家介绍Vue计算属性的使用，包括了Vue计算属性的使用的使用技巧和注意事项，需要的朋友参考一下 我们都知道在Vue构造函数的参数对象中有一个【data】属性，该属性值是一个对象，该对象是对数据的代理，是一个键值对并且时刻与页面表现是一致的，但是这里面只能是简单的键值对，不能拥有业务逻辑，并且由于【data】中的属性属于同一个生命周期，所以如果我们需要某一个属性是依赖于另外一个属性时，在【d
-
本文向大家介绍vue计算属性及使用详解，包括了vue计算属性及使用详解的使用技巧和注意事项，需要的朋友参考一下 一、什么是计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： 这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。 二、计算属性的用法 在一个计算属性里
-
我在该组件中有一个Angular2组件，它目前有一堆字段，前面应用了@input()，以允许绑定到该属性，即。
-
本文向大家介绍Vue计算属性的学习笔记，包括了Vue计算属性的学习笔记的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了Vue计算属性的学习笔记，供大家参考，具体内容如下 ①模板内的表达式实际上只用于简单的运算，对于复杂逻辑，使用计算机属性。 ②基础例子： 这里我们声明了一个计算机属性reversedMessage，我们提供的函数将用作属性vm.reversedMessage的getter