首頁(yè) 猿問(wèn) VUE中如何提交所選項(xiàng)的內(nèi)容？

VUE中如何提交所選項(xiàng)的內(nèi)容？

JavaScript

慕田峪9158850 2019-05-11 17:07:58

我用v-for循環(huán)出來(lái)個(gè)10個(gè)li標(biāo)簽，li的文字不同，{{i}}選擇其中2個(gè)，然后點(diǎn)擊提交怎么把選中的2個(gè)文字提交出來(lái)？以前用jquery操作dom，可以把選中的li獲取$(this).text()

查看完整描述

2 回答

月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

要明白，Vue是數(shù)據(jù)驅(qū)動(dòng)。newVue({el:'#app',data:{list:[1,2,3],checkedList:[],},methods:{liFocus(i){console.log(i);//如果要選中其中兩個(gè)，可以用數(shù)組來(lái)存儲(chǔ)。//如果沒(méi)有就pushif(this.checkedList.indexOf(i)===-1){this.checkedList.push(i);}//就是你需要的文字集合console.log(this.checkedList);},},})建議有空多看看Vue的官方文檔，配合例子練習(xí)，加深數(shù)據(jù)驅(qū)動(dòng)印象。

反對(duì) 回復(fù) 2019-05-11

12345678_0001

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

要獲取點(diǎn)中元素有兩種思路：其一是跟jquery的道理一樣，jquery是通過(guò)事件對(duì)象來(lái)獲取DOM屬性，$(this)包裝了本次事件對(duì)象相應(yīng)的DOM節(jié)點(diǎn)，使用封裝了的方法獲取屬性；vue也有事件對(duì)象，在事件處理函數(shù)里顯式注入$event,即liFocus($event),獲取原生的事件對(duì)象包含的DOM節(jié)點(diǎn)e.target，使用原生方法獲取屬性。其二是因?yàn)関ue有自己的模板語(yǔ)法，所以在循環(huán)結(jié)構(gòu)內(nèi)是可以直接使用在循環(huán)里聲明的i變量，可以把它作為參數(shù)直接傳入事件監(jiān)聽(tīng)函數(shù)里liFocus(i),在函數(shù)內(nèi)部可以訪問(wèn)這個(gè)變量再進(jìn)行存儲(chǔ)，這樣就不需要事件對(duì)象了，也省去了DOM操作。

反對(duì) 回復(fù) 2019-05-11