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

2020-11-27 来源：爱go旅游网

本文实例讲述了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>

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

显示全文

全部栏目

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