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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
微信小程序自定义toast的实现代码
Nov 16 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 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代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python 的 Socket 编程
2015/03/24 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python列表返回重复数据的下标
2020/02/10 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
校运动会广播稿(100篇)
2014/09/12 职场文书