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

示例一

computed的get属性

html:

<template> <div> <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属性:

html:

<template> <div> <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第三天学习笔记（计算属性computed）】相关文章：

★ 制作特殊字的脚本

★ 用Node.js通过sitemap.xml批量抓取美女图片

★ 利用JS生成博文目录及CSS定制博客

★ Javascript获取统一管理的提示语(message)

★ JS代码混淆初步

★ 深入浅析JavaScript面向对象和原型函数

★ js脚本学习 比较实用的基础

★ javascript为按钮注册回车事件（设置默认按钮）的方法

★ JavaScript生成福利彩票双色球号码

★ Java语言概述