vue父子通訊之三數定值求和

2021-10-07 23:18:58 字數 1730 閱讀 6368

假定三數不大於n的整數v1,v2,v3,其和為n

要求改變任意數值,其它兩數會自適應調整,確保三數和仍為n

呼叫規則 : 假定三數順序固定索引為 0,1,2, 那麼0數值增加了,則1數優先減少,不夠則向2數借,即0->1->2->0->1->2…順序

假定初始值分別為 40, 30, 30 , 定值和100,實現頁面改變輸入改變任意數,其它二數按規則自動變更

>

總數 }+}

+}=}

<

/p>

value1:

}<

/li>

value2:

}<

/li>

value3:

}<

/li>

}<

/h1>

for=

"(value,index) in items"

>

"value"

:index=

"index" @input=

"calcu"

/>

<

/li>

<

/ol>

<

/div>

<

/body>

"">

<

/script>

// 元件資料流動方向 0->1->2->0...

vue.

component

('vinput',,

props:

['value'

,'index'],

template:

` value}:`}

)new

vue(

, methods:

elseif(

isnan

(newvalue)

||(newvalue <

0|| newvalue >

this

.total)

)的正整數`

return

}// 獲取輸入後的副本資料

let items =

[...

this

.items]

.map

(x =>

parseint

(x))

// 計算新舊值變動差額,以便計算下乙個值是增或減

let diff = newvalue -

(this

.total - items[

(index +1)

%3]- items[

(index +2)

%3])

if(diff >0)

else

}else

items[index]

= newvalue

items[

(index +2)

%3]=

this

.total - items[index]

- items[

(index +1)

%3]this

.items = items

this

.msg =""}

,}})

console.

log(vue.version)

// 2.6.11

<

/script>

筆記 三 Vue父子元件傳值

父元件向子元件傳遞資料 vue中的父元件要想向子元件傳遞值的化需要通過屬性的方式傳遞 body div id root counter count 1 counter counter count 2 counter div script varcounter varvm newvue script ...

vue非父子關係之間通訊傳值

第一種方法 通過給vue例項新增自定義屬性 doctype html html head meta charset utf 8 title 非父子元件傳值 bus title script src js vue.js script head body div id child msg first c...

Vue學習(三) 父子元件以及傳值方式

vue父子元件及其傳值。最樸素的理解 父與子有血緣關係,父親向兒子傳遞資訊是通過基因傳遞的,基因即父親的props 屬性 在這個屬性欄位中需要定義好要傳遞的引數的型別,這種情況下只要父親變了兒子自然變了。預設父親的所有屬性兒子都有。舉例 submenue.vue sidermenue.vue ite...