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 相关文章推荐
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
微信小程序实现授权登录
May 15 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
实例解析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 VS ASP
2006/10/09 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue-router 中 meta的用法详解
2019/11/01 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python实现一个猜拳游戏
2020/04/05 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
安全员岗位职责
2015/02/10 职场文书
幼师小班个人总结
2015/02/12 职场文书
海上钢琴师观后感
2015/06/03 职场文书
2019各种保证书范文
2019/06/24 职场文书