java - vue.js如何寫checkbox.radio?
問題描述
我想用vue寫checkbox.radio,這個(gè)怎么做呢vue版本2.Xjava springmvc
正常情況下會(huì)生成如下格式
<select> <option value>值1</option> <option value>值2</option></seltct>
一般情況下數(shù)據(jù)庫里面放的是狀態(tài)碼 1,2。而前臺(tái)展示的時(shí)候顯示的是值1,值2。我如何直接輸出值1,值2呢,我不想在后臺(tái)進(jìn)行值查詢可以嗎?以前的JSP都是寫個(gè)tag,直接把值轉(zhuǎn)成html,現(xiàn)在vue我不知道怎么辦了
問題解答
回答1:首先,謝邀。
根據(jù)你的描述,是希望后臺(tái)只存狀態(tài)值,然后將對(duì)應(yīng)狀態(tài)值的content存在js的某個(gè)角落,當(dāng)你需要渲染的時(shí)候,再根據(jù)對(duì)應(yīng)狀態(tài)值,取出對(duì)應(yīng)的content渲染到頁面
由于這種一般都是后臺(tái)返回,但是這里根據(jù)需求你也許可以這么做
先在data中(或者寫一個(gè)store文件按順序?qū)iT存放這些內(nèi)容)
options: [ ’我是1’, ’我是2’, ’我是3’, ’我是4’, ’我是5’, ’我是6’, ’我是7’, ’我是8’, ’我是9’, ’我是10’,]
然后你可以在data里寫一個(gè)接受后臺(tái)傳來的狀態(tài)值
option_values: [ 0, 2, 4]
根據(jù)這些在頁面上渲染效果
<select> <option value=’item’ v-for=’item in option_values’>{{options[item]}}</option></select>
最終效果
不過,也不是什么好辦法,因?yàn)閷?duì)數(shù)組來說索引只能事數(shù)字了,就局限了狀態(tài)值的類型。以上是一種解決辦法。
那么考慮到狀態(tài)值的多樣化,該怎么做呢,講數(shù)組轉(zhuǎn)化為對(duì)象寫法將上述第一步改為鍵值對(duì)形式
options: { ’option1’:’我是1’, ’option2’:’我是2’, ’option3’:’我是3’, ’option4’:’我是4’, ’option5’:’我是5’, ’option6’:’我是6’, ’option7’:’我是7’, ’option8’:’我是8’, ’option9’:’我是9’, ’option10’:’我是10’, }
這么寫的話原本我們傳來只能是數(shù)字類型的狀態(tài)值就可以很自然的變?yōu)?/p>
option_values: [ ’option1’, ’option3’, ’option9’ ]
這樣也能保證狀態(tài)值的多樣化。
最后建議,以后這種內(nèi)容不對(duì)題的問題還是少些比較好,看下社區(qū)的規(guī)范有助于你快速找到答案。再次謝邀,希望可以幫到你,或者為你提供一些新的思路回答2:謝邀。
你這個(gè)問題問的就不專業(yè)... 你標(biāo)題想問checkbox.radio,內(nèi)容里面的代碼卻是 select下拉框。
而且這個(gè)是及其基礎(chǔ)的問題。如果值1,值2是后臺(tái)提供的,你怎么可能不進(jìn)行查詢呢?其實(shí)道理一樣,你在前端請(qǐng)求后臺(tái)拿到數(shù)據(jù)之后,再去渲染頁面。
相關(guān)文章:
1. javascript - JS設(shè)置Video視頻對(duì)象的currentTime時(shí)出現(xiàn)了問題,IE,Edge,火狐,都可以設(shè)置,反而chrom卻...2. javascript - 數(shù)組原聲方法中的一段代碼3. 求大神幫我看看是哪里寫錯(cuò)了 感謝細(xì)心解答4. php自學(xué)從哪里開始?5. javascript - 如果所有請(qǐng)求都放到actions 里面,那拿到的數(shù)據(jù)應(yīng)該 放在哪里,state 還是vue實(shí)例里面的data?6. javascript - 怎么實(shí)現(xiàn)移動(dòng)端頁面滑動(dòng)切換,從1可以滑到2 但是不能從2滑回1 這樣的效果呢?7. 數(shù)據(jù)庫 - MySQL 單表500W+數(shù)據(jù),查詢超時(shí),如何優(yōu)化呢?8. mysql多表查詢9. phpstady在win10上運(yùn)行10. python - from ..xxxx import xxxx到底是什么意思呢?
