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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JavaScript简单编程实例学习
Feb 14 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
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
vuex实现简易计数器
2016/10/27 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
Python从零开始创建区块链
2018/03/06 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python File(文件) 方法整理
2019/02/18 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
QML用PathView实现轮播图
2020/06/03 Python
如何将json数据转换为python数据
2020/09/04 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
工程师自我评价怎么写
2013/09/19 职场文书
行政管理专业推荐信
2013/11/02 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
数学复习课教学反思
2016/02/18 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Java 多态分析
2022/04/26 Java/Android