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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Vue组件tree实现树形菜单
Apr 13 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
原生js实现点击轮播切换图片
Feb 11 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python表达式的优先级详解
2020/02/18 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python Zmail模块简介与使用示例
2020/12/19 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
社区党员先进事迹
2014/01/22 职场文书
校园文化建设方案
2014/02/03 职场文书
法学专业自我鉴定
2014/02/05 职场文书
前处理组长岗位职责
2014/03/01 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
单位工资证明范本
2015/06/12 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python