vue單選題如何把v-bind:class兩個狀態(tài)同時顯示出來呢？

demo:模擬業(yè)務(wù)邏輯http://jsrun.net/xWZKp/edit

自己寫的效果樣子

故意點(diǎn)錯誤的答案，再點(diǎn)提交之后效果圖

我現(xiàn)在不會弄兩個class

怎么判斷答案和選中的
然后分別把兩個正確狀態(tài)和錯誤狀態(tài)一并顯示出來

//不知道為什么大家好像沒有看到demo給的鏈接，我就甩出下面的代碼來。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .scroll-wrap {
            width: 200px;
            border: 1px solid blue;
            overflow: hidden;
        }

        .scroll-content {
            position: relative;
            transition: top 0.5s;
        }

        .scroll-content li {
            line-height: 50px;
            text-align: center;
        }

        .active {
            border: 1px solid #ddd;
        }
        .Right{
            border:1px solid red;
        }
        .Error{
            border:1px solid #4ac291;
        }
    </style>
</head>

<body>
    <div id="example">
        <template>
            <form class="static activeShow">
                <div class="">
                    <span class="option-left" style="font-weight: bold;font-size:18px;">【{{duoxuan[types-1]}}】</span>
                    <span class="option-right">
                        <span class="spancolor">剩余答題時間：</span>
                        <span class="spantime">60</span>
                    </span>
                </div>
                <div class="option-text">
                    <span class="option-left">{{titleexam}}</span>
                </div>
                <label style="width:100%;float:left; cursor: pointer;" v-for="(item,index) in answer" v-bind:class="{Right:item.score}">
                    <template v-if="types==1">
                        <input type="radio" id="item.id" name="sex" :value="item.id" class="radio-ple" ref="ipt" @click="alocked(index,item.id,examId)"
                        />{{item.answer}}
                    </template>
                    <template v-if="types==2">
                        <input name="Fruit" type="checkbox" ref="ipt" @click="checkeds(index,item.id,examId)" class="multiple" /> {{item.answer}}
                    </template>
                </label>
                <label style="width:100%;float:left; cursor: pointer;" v-for="item in rightlist">
                    <template v-if="types==3">
                        <input name="Fruit2" type="radio" class="radio-ple" ref="ipt" @click="judgment(index,item.id,examId)" /> {{item}}
                    </template>
                </label>
            </form>
            <div class="text-align">
                <button @click="getAnswer()">提交</button>
            </div>
        </template>
    </div>

    <script src="http://mooc-10050339.file.myqcloud.com/js/vue.js"></script>
    <script>
        var result = { "code": 100, "message": "操作成功", "data": { "isRight": 0, "answer": [{ "score": 0, "answer": "悲觀厭世", "id": 27749 }, { "score": 0, "answer": "出現(xiàn)幻覺、妄想", "id": 27750 }, { "score": 0, "answer": "有自殺企圖或行為", "id": 27751 }, { "score": 1, "answer": "興趣狹窄", "id": 27752 }], "id": 127, "title": "自閉癥患者主要表現(xiàn)為不同程度的言語發(fā)育障礙、人際交往障礙、行為方式刻板和（    ）幾方面。", "type": 1 } }
        new Vue({
            el: "#example",
            data: {
                answer: '',
                duoxuan: ['單選題', '多選題', '判斷題'],
                rightlist: ['正確', '錯誤'],
                types: '',
                titleexam: '',
                examId: '',
                checkQues: {},
            },
            created: function () {
                var self = this;
                console.log(result.data);
                self.titleexam = result.data.title;
                self.answer = result.data.answer;
                self.types = result.data.type;
                self.examId = result.data.id;
                self.types = result.data.type;

            },
            methods: {
                alocked: function (item, check, id, pageid) {  //單選題
                    this.checkQues[id] = '' + check + ''; //已答題的區(qū)集
                },
                checkeds: function (items, check, id, pageid) {  //多選題
                    var checkListDate = this.checkList;
                    var check = check.toString();
                    if (this.checkList.indexOf(check) > -1) {
                        let index = this.checkList.indexOf(check)
                        this.checkList.splice(index, 1)
                        var duoid = this.checkList.join();
                        if (duoid == "") {
                        }
                        this.checkQues[id] = '' + duoid + ''; //已答題的區(qū)集
                    } else {
                        this.checkList.push(check);
                        var duoid = this.checkList.join();
                        this.checkQues[id] = '' + duoid + ''; //已答題的區(qū)集
                    }
                },
                judgment: function (item, check, pageid) {  //判斷題
                    if (item == 0) {
                        this.checkQues[pageid] = 1; //已答題的區(qū)集
                    } else {
                        this.checkQues[pageid] = 0; //已答題的區(qū)集
                    }
                },
            }

        })
    </script>
</body>

</html>

回答

編輯回答

尛曖昧

你的每個選項(xiàng)是for循環(huán)渲染出來的吧，那么正確答案的選項(xiàng)也是知道的。

/*每個選項(xiàng)綁定的樣式*/
<div v-for="(item, index) in question">
    <div :class="bindClass" @click="clickItem(index)"></div>
</div>

data() {
    return {
        question: [...],
        bindClass: '' //未選擇的時候
    }
}
/*點(diǎn)擊選項(xiàng)時的點(diǎn)擊事件*/
clickItem(index) {
    if(question[index]===正確答案){
        bindClass = correctClass //答對的樣式
    }else {
        bindClass = errorClass /答錯的樣式
    }
}

但我不知道你一道題返回的數(shù)據(jù)格式是什么樣子的，你可以大概看看這種思路是否可行？

2017年8月5日 19:17

編輯回答