Question

我要呈现问题和答案，然后将一种样式附加到问题上，将另一种样式附加到答案上。

我的数据看起来像这样

 dialogTut:{
        mainTab:{
          q:"data with 42 people?",
          a:"hehe",
          q:"Are awesome people?",
          a:"sometimes",
          q:"Are awesome people2?",
        }

      },

我想在Label中渲染它，因为它的本机脚本（也许还有其他方法）

<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

如果JS对象中有重复的键，则仅选择最后一个。您需要一个数组来存储它们。
您可以使用对象语法来绑定不同的类名称：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax。

-

dialogTut: {
  mainTab: [
    { type: "q", index: 1, content: "data with 42 people?" },
    { type: "a", index: 2, content: "hehe" },
    { type: "q", index: 3, content: "Are awesome people?" },
    { type: "a", index: 4, content: "sometimes" },
    { type: "q", index: 5, content: "Are awesome people2?" }
  ]
}

<StackLayout class="dialog">
  <Label :key="item.index"
         :text="item.content"
         :class="{'h3': item.type == 'q', 'answer': item.type == 'a'}"
         v-for="item in mainTab">
  </Label>
  <Button class="drawer-close-button" text="Cancel" @tap="closeDialog"></Button>
</StackLayout>

Answer 2

替换为：class =“ [item == q？'h3'：'answer']” 或：class =“ {'h3'：item == q，'answer'：item == a}”

Answer 3

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

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>

在Vue中渲染对象的循环

3 个答案: