如何在 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 中访问数组组件并更改其样式?的主要内容,如果未能解决你的问题,请参考以下文章