Vue.js第三天学习笔记（计算属性computed）

今天给大家分享下vue.js中的计算属性（computed）
示例一
computed的get属性

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

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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。