在Vue.js中,computed屬性通常被用于依賴其他數(shù)據(jù)計算出新的屬性值,但是有時候我們需要根據(jù)computed屬性來更新其他數(shù)據(jù),這時我們就需要用到computed set函數(shù)。
computed set函數(shù)是一個特殊的計算屬性,它不僅可以根據(jù)其他數(shù)據(jù)計算值,還能響應(yīng)數(shù)據(jù)的變化。當(dāng)被監(jiān)聽的值發(fā)生變化時,computed set函數(shù)會自動執(zhí)行,從而更新其他數(shù)據(jù)。
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(newVal) {
var names = newVal.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}
上面的代碼中,我們定義了一個fullName的計算屬性,并且定義了它的get和set函數(shù)。在get函數(shù)中,我們根據(jù)firstName和lastName計算了fullName的值,在set函數(shù)中,我們通過將fullName字符串拆分成兩個名字,來更新firstName和lastName。
當(dāng)我們在模板中修改fullName時,computed set函數(shù)會自動執(zhí)行,將新的值分解成firstName和lastName,并更新到數(shù)據(jù)模型中:
<template>
<div>
<input v-model="fullName">
<p>First Name: {{ firstName }}</p>
<p>Last Name: {{ lastName }}</p>
</div>
</template>
上一篇Python 新安江模型
下一篇c mvc 返回json