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程序设计有所帮助。

Javascript 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
限制只能输入数字的实现代码
May 16 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 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
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP游戏编程25个脚本代码
2011/02/08 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
好人好事事迹材料
2014/02/12 职场文书
拖欠货款起诉状
2015/05/20 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
大学生见习总结报告
2015/06/24 职场文书
2015团员个人年度总结
2015/11/24 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书