首頁 > web前端 > js教程 > Vue.js計算屬性computed

Vue.js計算屬性computed

高洛峰
發布: 2016-12-03 09:11:38
原創
1212 人瀏覽過

computed的get屬性

html:

<template>
 <div class="input-text">
 <input type="text" v-model=&#39;firstName&#39;>
 <input type="text" v-model=&#39;lastName&#39;>
 {{fullName}}
 </div>
</template>
登入後複製

js:

<script>
export default {
 components: {
 
 },
 ready: function() {
 
 },
 methods: {
 },
 data() {
 return {
 firstName: &#39;Foo&#39;,
 lastName: &#39;Bar&#39;
 }
 },
 computed: {
 fullName: {
 // getter
 get: function() {
 return this.firstName + &#39; and &#39; + this.lastName
 },
 // setter
 set: function(newValue) {
 var names = newValue.split(&#39; and &#39;)
 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=&#39;a&#39;>{{b}}
 <input type="button" value="修改b的值" @click=&#39;updateData&#39;>
 <input type="text" v-model=&#39;c&#39;>
 </div>
</template>
登入後複製

js:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板