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

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.title 组件更改为粗体，而不是整个笑话数组内容。

提前感谢你们的帮助<3

Answer 1

这个怎么样<template>&nbsp; <div>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li v-for="jokes in joke" :key="jokes">&nbsp; &nbsp; &nbsp; &nbsp; <strong>{{ jokes.title }}: </strong> <br />{{ jokes.text }} <br /><br />&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></template><script>export default {&nbsp; name: "Liste",&nbsp; props: ["joke"],};</script>

Answer 2

但是@thks173 提供的答案有效，我建议不要将 html 标签用于样式目的。还有几点注意事项：class如果您使用静态类，则不需要绑定属性。key 属性应该是唯一的原始值，例如title，如果它是唯一的。并且更方便地循环jokes和设置特定的样式joke。我的解决方案是：<template>&nbsp; <div>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li v-for="joke in jokes" :key="joke.title" class="joke">&nbsp; &nbsp; &nbsp; &nbsp; <p class="title">{{ jokes.title }}</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>{{ jokes.text }}</p>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></template><script>export default {&nbsp; name: "Liste",&nbsp; props: ["joke"],};</script><style scoped>&nbsp;.joke {&nbsp; &nbsp;margin-bottom: 10px;&nbsp; }&nbsp;.joke .title {&nbsp; font-weight: bold;&nbsp; }</style>