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

Posted

技术标签:

【中文标题】如何在 Vue 中访问数组组件并更改其样式?【英文标题】:How to access array component and change their style in Vue? 【发布时间】:2020-10-18 17:49:25 【问题描述】:

各位程序员们好,

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

代码:

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

提前感谢你们的帮助

【问题讨论】:

【参考方案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>

【讨论】:

【参考方案2】:

无论@thks173 提供的答案是否有效,我建议不要将 html 标签用于样式目的。 还有几点注意事项:

    如果您使用静态类,则无需绑定class 属性。 key 属性应该是唯一的原始值,例如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>

【讨论】:

这就像我想要它一样谢谢你!但我需要将v-for"joke in jokes" :key="joke.title" 编辑为v-for="jokes in joke" :key="jokes.title" 。 (只是改变了笑话和笑话的顺序)当然还有CSS标签:)

以上是关于如何在 Vue 中访问数组组件并更改其样式?的主要内容,如果未能解决你的问题,请参考以下文章

在Vue中更改页面时如何删除样式表

如何将全局样式表导入组件 vue?

在 Nuxt 项目中自定义 bootstrap-vue

定制修改组件库的几种方式

如何强制 Vue 在路由更改时销毁并重新创建组件?

VUE2js:如何在其道具更改后重新渲染组件?