動態生成input並繫結v model

2022-08-31 00:33:15 字數 1178 閱讀 6572

引言:在我們編寫**的時候,往往會出現例如動態增加input輸入框等等動態操作,在vue專案中,如果動態增加input並且繫結v-model,並實現互不影響,則需要深拷貝,如果直接push的話是為淺拷貝,所有動態生成的input繫結的v-model位址值都指向同乙個位址,就導致輸入乙個input,其餘的input都會變化

<

div

id>

<

input

type

='text'

v-model

='item.val'

v-for

='(item,

index) in list' :key

='index'

>

<

button

@click

='surefn'

>增加

button

>

div>

<

script

>

const vm

=new

vue(,

methods:

for(let i =0

, j =10

, i

<

j, j

++) , params))}}

}})

script

>

另一種寫法,直接push物件, 只要實現位址值不一樣就可以

<

div

id>

<

input

type

='text'

v-model

='item.val'

v-for

='(item,

index) in list' :key

='index'

>

<

button

@click

='surefn'

>增加

button

>

div>

<

script

>

const vm

=new

vue(,

methods: )}}

}})

script

>

Input標籤禁用與Css動態樣式繫結

input標籤存在乙個disabled屬性,可以用來禁用此標籤,通常還可以對這個屬性進行禁用後的樣式修改 一般裡面對應乙個bool屬性,表示是否禁用標籤,而樣式修改可以在css中自己設定 通常寫法如下例所示 input disabled class指令只能繫結要給css類 class.樣式類名稱 布...

動態繫結CheckBoxList,並預設勾選多選框

首先這是介面展示列 當我點選更新操作後,效果如下 前台 所屬區域 後台 動態繫結省份核取方塊 private void bindboxprovince private void binddata ddlgame.selectedvalue gameareaentity.gameid.tostring...

動態生成Ext GUI及繫結事件

ext元素對應的bean轉json pom.xml com.google.code.gson gson 1.4import com.google.gson.gson import com.google.gson.gsonbuilder public class beantojsontool ajax...