Javascript 如何在Vue.js中使用三元运算符设置无线电输入属性

有没有办法在Vue.js中编写三元运算符来设置单选按钮的状态？现在我有了v-if/v-else-if/v-else，可以在标签内显示3种单选按钮。我想以某种方式使用三元运算符来设置属性

checked

或

disabled

，具体取决于当前输入是正确的、不正确的还是简单的答案。我计划在上使用三元运算符来设置输入的类别，但这并不重要，除非我可以根据答案是否正确、不正确或简单答案在每个输入上设置选中/禁用属性

<label class="form-check-label" 
    v-bind:style="
    (!question.Correct && question.AnswerGiven==(index+1)) ? wrongAnswer 
        : (!question.Correct && question.CorrectAnswer == (index+1)) ? rightgAnswer 
        :   plainAnswer">

        <!-- Wrong Answer -->
        <input type="radio" v-if="!question.Correct && question.AnswerGiven==(index+1)"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="{wrongAnswerInput: !question.Correct && question.AnswerGiven==(index+1)}"
            class="form-check-input" 
            :value="index" 
            :name="question.Question.ID" 
            checked>

        <!-- Correct Answer -->
        <input type="radio" v-else-if="!question.Correct && question.CorrectAnswer == (index+1)"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="{correctAnswerInput: !question.Correct && question.CorrectAnswer == (index+1)}"
            class="form-check-input" 
            :value="index" 
            :name="question.Question.TestSharedID" 
            checked>

        <!-- Plain Answer -->
        <input type="radio" v-else
            v-on:input="changed(question.Question.ID,index)" 
            class="form-check-input" 
            :value="index" 
            :name="question.Question.TestSharedID" 
            disabled>
            {{answer}}
</label>

{{答案}

更新了下面的代码 这就是我重构它的目的。。但是我不确定我是否已经盯着它看了太久，但是给每个输入元素分配了正确的类，但是现在它没有禁用正常的输入。现在加载时，它正在预检查一个不正确的答案，这正是我想要的，但它没有禁用正常输入，也没有预检查正确答案

<label class="form-check-label" 
    v-bind:style="
    (!question.Correct && question.AnswerGiven==(index+1)) ? wrongAnswer 
        : (!question.Correct && question.CorrectAnswer == (index+1)) ? rightgAnswer 
        :   plainAnswer">
        <!-- Wrong Answer -->
        <input type="radio"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="
            (!question.Correct && question.AnswerGiven == (index+1)) ? wrongAnswerInput
            : (!question.Correct && question.CorrectAnswer == (index+1)) ? correctAnswerInput
            :   plainAnswer"
            class="form-check-input" 
            :value="index" 
            :name="
            (!question.Correct && question.AnswerGiven == (index+1)) ? question.Question.ID
            : (!question.Correct && question.CorrectAnswer == (index+1)) ? question.Question.TestSharedID
            : question.Question.TestSharedID" 
            :checked="isChecked"
            :disabled="isDisabled">
            {{answer}}
</label>

{{答案}

计算结果如下所示

    isDisabled() {
        let questions = this.reviewPanel.Questions
        for (let i = 0; i < questions.length; i++) {
            for (let j = 0; j < questions[i].Question.AnswerChoices.length; j++) {
                if(questions[i].Correct) {
                    return true
                }
            }
        }
    },
    isChecked() {
        let questions = this.reviewPanel.Questions

        for (let i = 0; i < questions.length; i++) {
            for (let j = 0; j < questions[i].Question.AnswerChoices.length; j++) {
                if(!questions[i].Correct && questions[i].CorrectAnswer == (j+1) || !questions[i].Correct && questions[i].AnswerGiven == (j+1)) {
                    return true
                }
            }
        }
    }

isDisabled（）{
让问题=this.reviewPanel.questions
for（设i=0；i

您可以将条件传递给：checked或：disabled，然后重用其他所有内容

<input type="radio"
       v-on:input="changed(question.Question.ID,index)" 
       v-bind:class="{wrongAnswerInput: !question.Correct && question.AnswerGiven==(index+1)}"
       class="form-check-input" 
       :value="index" 
       :name="question.Question.ID" 
       :checked="isChecked"
       :disabled="isDisabled"
>

例如，isChecked和isDisabled可以是计算属性。也可以直接在模板中写入条件

如果你真的想要，也可以使用三元（但我相信你在这里不需要它），例如

另见：

---

哦，我甚至没有想到这一点（显然）。我会详细回答的。你介意看一下更新后的答案吗？@DylanNguyen因为模板中有大量的条件，所以很难阅读。考虑为计算的输入定义一些状态，比如IsError、IsError，并使用它们来绑定类和样式。关于行为，我想我没有什么要补充的。将布尔值传递给道具必须正常工作，重新检查您的条件以及它们返回的结果。

<input type="radio"
       :disabled="someCondition ? someAnotherCondition : yetAnotherCondition"
>