在 vue for 循环中从对象渲染

Question

我想呈现问题和答案，并将一种样式附加到问题中，将另一种样式附加到答案中。我的数据看起来像这样 dialogTut:{        mainTab:{          q:"data with 42 people?",          a:"hehe",          q:"Are awesome people?",          a:"sometimes",          q:"Are awesome people2?",        }      },我想在 Label 中渲染它，因为它的 nativescript （也许还有其他方法）<StackLayout class="dialog">        <Label v-bind:key="item.index"              :text="item"               :class="[item==q ? 'h3' : '' , 'a']"               v-for="item in mainTab">        </Label>        <Button class="drawer-close-button" text="Cancel" @tap="closeDialog"></Button>    </StackLayout>我尝试了一些可能性：class 但不起作用。如何呈现整个列表并将 'h3' 类附加到 item.q 并将 'answer' 类附加到 item.a ？

Answer 1

我会以这种方式重组您的数据：

mainTab:[

   {q:"data with 42 people?", a:"hehe"},

   {q:"Are awesome people?", a:"sometimes"}

]

和你的 html：

<template 

   :value="item.q" 

   v-for="(item,index) in mainTab">

   <p class="questionClass" :key="'q_'+index">{{item.q}}</p>

   <p class="answerClass" :key="'a_'+index">{{item.a}}</p>

</template>

Answer 2

替换为 :class="[item==q ? 'h3' : 'answer']" 或 :class="{ 'h3': item==q, 'answer': item==a }"