鍍金池/ 問答/HTML/ Vue單選問題

Vue單選問題

想用vue做這樣一個(gè)功能，請(qǐng)教大家給點(diǎn)思路代碼具體怎么實(shí)現(xiàn)

第一步，(單選)點(diǎn)擊選擇需要的內(nèi)容
圖片描述

第二步，給用戶展現(xiàn)用戶剛剛選中的內(nèi)容
圖片描述

第三步，提交一個(gè)表單到后臺(tái)
圖片描述

回答
編輯回答
慢半拍

先搞個(gè)數(shù)據(jù)結(jié)構(gòu)出來，大體結(jié)構(gòu)就是下面這樣，把每個(gè)選中的都放在對(duì)應(yīng)的分類下。然后第二頁就是吧select弄出來就好了。也可以用index。

data = [
    {
        title: 'new',
        select: '',
        children: ['股票'，'科技' ,'產(chǎn)業(yè)']//單選的話，這樣就蠻好的
    }，
    {
        title: 'hot',
        select: '',
        children: ['營改增'，'申報(bào)辦稅' ,'出口退稅']
    },
]
<ul>
    <li  v-for="item of data">
        <h4>{{item.title}}</h4>
        <span v-for="c of item" :class="{'select': c.select == c}" @click="c.select = c">{{c}}</span>
    </li>
</ul>
2018年4月26日 21:06
編輯回答
心悲涼

設(shè)置一個(gè)選中項(xiàng)，如aa，同時(shí)在每一項(xiàng)等于aa的時(shí)候，加上選中狀態(tài)，在點(diǎn)下一步的區(qū)域把a(bǔ)a展示出來，在提交的時(shí)候，傳到后臺(tái)

<span v-for="(item,i) of items" :class="item===selectedItem?'selected':''" @click="selectedItem=item" :key="i">{{item}}</span>
2018年1月23日 06:04
編輯回答
空白格

這個(gè)就是類似于單/復(fù)選框，每個(gè)選項(xiàng)都綁定有一個(gè)固定的值（index應(yīng)該比較方便），用一個(gè)object存你所選擇的值，例： { a:[1], b: [1, 2] }; a,b就代表你的分類（財(cái)經(jīng)新聞，熱點(diǎn)聚焦）。 在1選擇完后，點(diǎn)擊下一步，遍歷顯示object存儲(chǔ)的對(duì)應(yīng)值；提交就不用說了吧

2017年1月26日 15:16