编程 Javascript

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

Posted in Javascript onMarch 13, 2019

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.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>

运行结果：

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

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

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

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

- Author -

白杨-M

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS:window.onload的使用介绍

Nov 13 Javascript

js+HTML5基于过滤器从摄像头中捕获视频的方法

Jun 16 Javascript

简单介绍JavaScript数据类型之隐式类型转换

Dec 28 Javascript

jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】

Mar 23 jQuery

Node.js 异步异常的处理与domain模块解析

May 10 Javascript

js学习总结之dom2级事件基础知识详解

Jul 27 Javascript

Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

Sep 11 Javascript

Angularjs自定义指令实现分页插件(DEMO)

Sep 16 Javascript

深入浅析vue组件间事件传递

Dec 29 Javascript

vue项目中公用footer组件底部位置的适配问题

May 10 Javascript

js之切换全屏和退出全屏实现代码实例

Sep 09 Javascript

vue实现简单全选和反选功能

Sep 15 Javascript

vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

Mar 13 #Javascript

vue生命周期与钩子函数简单示例

Mar 13 #Javascript

微信小程序picker组件关于objectArray数据类型的绑定方法

Mar 13 #Javascript

vue实现百度下拉列表交互操作示例

Mar 12 #Javascript

vue基础之使用get、post、jsonp实现交互功能示例

Mar 12 #Javascript

深入理解Node内建模块和对象

Mar 12 #Javascript

vue基础之模板和过滤器用法实例分析

Mar 12 #Javascript