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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
网上抓的一个特效
May 11 Javascript
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
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
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
ant design实现圈选功能
2019/12/17 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python多进程共享变量
2016/04/06 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python二维键值数组生成转json的例子
2019/12/06 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
C面试题
2015/10/08 面试题
我的五年职业生涯规划
2014/01/23 职场文书
大课间活动实施方案
2014/03/06 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
2014年护理部工作总结
2014/11/14 职场文书
保护校园环境倡议书
2015/04/28 职场文书
公司2015年终工作总结
2015/05/26 职场文书
房产证明范本
2015/06/19 职场文书
歌咏比赛口号大全
2015/12/25 职场文书