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 相关文章推荐
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php实现登陆模块功能示例
2016/10/20 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
nodejs基础应用
2017/02/03 NodeJs
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
linux下安装easy_install的方法
2013/02/10 Python
python获取图片颜色信息的方法
2015/03/18 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python ftp上传文件
2016/02/13 Python
windows下python和pip安装教程
2018/05/25 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python如何将装饰器定义为类
2020/07/30 Python
酒店服务实习自我鉴定
2013/09/22 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
学校献爱心活动总结
2014/07/08 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
中秋节感想
2015/08/10 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android