Vue.js第三天學(xué)習(xí)筆記(計(jì)算屬性computed)
今天給大家分享下vue.js中的計(jì)算屬性(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'>{} <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 重新賦值時(shí)就會(huì)調(diào)用 b 的 set 屬性,從而改變 c 的值 } }, data() { return { a:'1:30', c:'' } }, computed: { b:{ get: function() {//通過(guò)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){//通過(guò)b值的改變,設(shè)置 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前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-admin-box第一步npm?install時(shí)報(bào)錯(cuò)的處理
這篇文章主要介紹了vue-admin-box第一步npm?install時(shí)報(bào)錯(cuò)的處理方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁(yè)面,返回舊頁(yè)面,保留之前的數(shù)據(jù)記錄(操作代碼)
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁(yè)面,返回舊頁(yè)面,保留之前的數(shù)據(jù)記錄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue如何解決el-select下拉框顯示ID不顯示label問(wèn)題
這篇文章主要介紹了vue如何解決el-select下拉框顯示ID不顯示label問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12