Vue.js第三天学习笔记(计算属性computed)


Posted in Javascript onDecember 01, 2016

今天给大家分享下vue.js中的计算属性(computed)

示例一

computed的get属性

Vue.js第三天学习笔记(计算属性computed)

html:

<template>
 <div class="input-text">
 <input type="text" v-model='firstName'>
 <input type="text" v-model='lastName'>
 {{fullName}}
 </div>
</template>

js:

<script>
export default {
 components: {

 },
 ready: function() {

 },
 methods: {
 },
 data() {
 return {
 firstName: 'Foo',
 lastName: 'Bar'
 }
 },
 computed: {
 fullName: {
 // getter
 get: function() {
 return this.firstName + ' and ' + this.lastName
 },
 // setter
 set: function(newValue) {
 var names = newValue.split(' and ')
 this.firstName = names[0]
 this.lastName = names[names.length - 1]
 }
 }
 }
}
</script>

示例二

computed的get和set属性:

Vue.js第三天学习笔记(计算属性computed)

html:

<template>
 <div class="input-text">
 <input type="text" v-model='a'>{{b}}
 <input type="button" value="修改b的值" @click='updateData'>
 <input type="text" v-model='c'>
 </div>
</template>

js:

<script>
export default {
 components: {
 },
 ready: function() {
 },
 methods: {
 updateData:function(){
 this.b=this.b;//给 b 重新赋值时就会调用 b 的 set 属性,从而改变 c 的值
 }
 },
 data() {
 return {
 a:'1:30',
 c:''
 }
 },
 computed: {
 b:{
 get: function() {//通过a的值改变b的值
 var time=this.a;
 time = time ? time.split(':') : '';
 let hours = time[0];
 let minutes = time[time.length - 1];
 return parseInt(hours) * 60 + parseInt(minutes);
 },
 set:function(newValue){//通过b值的改变,设置 c 的值
 let newTimes = newValue;
 let hoursTime = parseInt(newTimes) / 60;
 let minutesTime = parseInt(newTimes) % 60;
 newTimes = newTimes + '';
 hoursTime = hoursTime + '';
 hoursTime = hoursTime ? hoursTime.split('.') : '';
 this.c = hoursTime[0] + ':' + minutesTime;
 console.log(hoursTime[0] + ':' + minutesTime);
 }
 }
 }
}
</script>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
Java无向树分析 实现最小高度树
Apr 09 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 #Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
JQuery学习总结【二】
Dec 01 #Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
You might like
php 特殊字符处理函数
2008/09/05 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python max内置函数详细介绍
2016/11/17 Python
Python中如何获取类属性的列表
2016/12/26 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
numpy自动生成数组详解
2017/12/15 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
怎么写好自荐信
2013/10/30 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
学校教师读书活动总结
2014/07/08 职场文书
2014年共青团工作总结
2014/12/10 职场文书
期中考试复习计划
2015/01/19 职场文书
监察建议书
2015/02/04 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015小学师德工作总结
2015/07/21 职场文书
python之django路由和视图案例教程
2021/07/26 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js