Question

各位程序员，

我想问你们是否知道我如何更改对象数组的特定组件的样式

代码：

<template>
  <div>
    <ul>
      <li v-for="jokes in joke" :key="jokes" :class="jokes">
        {{ jokes.title }}: <br />{{ jokes.text }} <br /><br />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Liste",
  props: ["joke"],
};
</script>

<style scoped>
.jokes {
  font-weight: bold;
}
</style>

所以我的目标是只将jokes数组的jokes.title组件更改为粗体，而不更改整个jokes数组的内容。

预先感谢您帮助的人<3

Answer 1

怎么样

<template>
  <div>
    <ul>
      <li v-for="jokes in joke" :key="jokes">
        <strong>{{ jokes.title }}: </strong> <br />{{ jokes.text }} <br /><br />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Liste",
  props: ["joke"],
};
</script>

Answer 2

尽管@ thks173提供的答案有效，但我建议不要出于样式目的使用html标签。还有几点注意事项：

如果您使用的是静态类，则无需绑定class属性。
键属性应该是唯一的原始值，例如title（如果唯一）。
并且更方便地遍历jokes和样式特定的joke。

我的解决方法是：

<template>
  <div>
    <ul>
      <li v-for="joke in jokes" :key="joke.title" class="joke">
        <p class="title">{{ jokes.title }}</p>
        <p>{{ jokes.text }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Liste",
  props: ["joke"],
};
</script>

<style scoped>
 .joke {
   margin-bottom: 10px;
  }
 .joke .title {
  font-weight: bold;
  }
</style>

如何在Vue中访问数组组件并更改其样式？

2 个答案: