vue计算属性computed的使用方法示例

来源：动视网责编：小采时间：2020-11-27 22:00:05

vue计算属性computed的使用方法示例

vue计算属性computed的使用方法示例:本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码，一定记得return

推荐度：

点击下载本文 文档为doc格式

导读vue计算属性computed的使用方法示例:本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码，一定记得return

本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下：

computed:{
 b:function(){ //默认调用get
 return 值
 }
}

computed:{
 b:{
 get:
 set:
 }
}

* computed里面可以放置一些业务逻辑代码，一定记得return

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com vue计算属性computed</title>
 <style>
 </style>
 <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
</head>
<body>
 <div id="box">
 a => {{a}}
 <br>
 b => {{b}}
 </div>
 <script>
 var vm=new Vue({
 el:'#box',
 data:{
 a:1
 },
 computed:{
 b:{
 //业务逻辑代码,b的值完全取决于return回来的值
 get:function(){
 return this.a+2;//默认调用get
 },
 set:function(val){
 this.a=val;
 }
 }
 }
 });
 document.onclick=function(){
 vm.b=10;//相当于set函数传入val=10
 };
 </script>
</body>
</html>

运行结果：