Vue computed 计算属性代码实例


Posted in Javascript onApril 22, 2020

什么是计算属性???

1、在computed中,可以定义一些属性,这些属性叫做【计算属性】

2、计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="firstname">+
  <input type="text" v-model="lastname">=
  <input type="text" v-model="fullname">
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstname: '',
      lastname: ''
    },
    methods: {},
    computed:{
      // 在computed中,可以定义一些属性,这些属性叫做【计算属性】
      // 计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用
      'fullname':function () {
        return this.firstname + '-' + this.lastname;
      }
     }
  })
</script>
</body>
</html>

重点注意

1、计算属性,在调用的时候,一定不要加()去调用,直接将它当做普通属性使用

2 、计算属性的function中引用的data中的数据发生了变化,就会立即重新计算这个计算属性的值

3、 计算属性的求值结果,会被缓存起来,方便下次直接使用;如果计算属性方法中,所有来的任何数据没有发生改变,则不会重新计算

内容扩展

vue之computed(计算属性)的使用方法

在vue中,一些简易的计算可以直接在模板中计算,如:{{ number + 1 }};但是在模板中如果有太多复杂的计算难以维护;所以对于任何复杂的逻辑,你都应该使用计算属性的原因;

1.经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变;

2:computed属性和methods属性

你可能已经注意到我们可以通过调用method来达到同样的效果:我们可以将同一个函数定义为一个method而不是一个计算属性,对于最终的结果,两种方式确实是相同的;

然而,计算属性是基于他们的依赖就行缓存的,计算属性只有在它相关的依赖发生改变时才会重新求值,这意味着只要message 还没有发生改变,多次访问reversedMessage计算属性会立刻返回之前计划算的结果,而不必再次执行函数.

3:computed中的属性;

计算属性默认只有getter不过在需要时也可以提供一个setter;

var vm=new Vue({
 el:"#demo",
 data:{
 firstName:"foo",
 lastName:"Bar",
 fullName:"foo Bar"
},
computed:{
 fullName:function(){
   get:function(){
     return this.firstName+" "+this.lastName;
   },
   setter:function(){
     var names=newValue.split('');
     this.firstName=names[0];
     this.lastName=names[names.length-1]
   }
 }
}
});

到此这篇关于Vue computed 计算属性代码实例的文章就介绍到这了,更多相关Vue之computed 计算属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js快速排序的实现代码
Dec 08 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
js 解析 JSON 数据简单示例
Apr 21 #Javascript
react 原生实现头像滚动播放的示例
Apr 21 #Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 #Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
You might like
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python可以用来做什么
2020/11/23 Python
用python发送微信消息
2020/12/21 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
财务总监管理职责范文
2014/03/09 职场文书
三八活动策划方案
2014/08/17 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers