Vue循环语句渲染实现将循环体变量用于标签属性||Vue实现渲染不同CSS样式的列表

最新推荐文章于 2023-08-02 16:48:18 发布

Charlesix59

最新推荐文章于 2023-08-02 16:48:18 发布

阅读量371

点赞数 1

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/Charlesix59/article/details/118893718

版权

8 篇文章 1 订阅

订阅专栏

这一点能够实现，得益于Vue中，v-for比v-bind的优先级更高
如果直接再属性中写个
color=pep.color这样是不行滴，我们需要用到v-bind属性，如下
注意 :是v-bind：的简写

<tr id="fi">
	<td  v-for="pep in peps" :style="'background-color:'+(pep.color)">
		{{pep.name}}
		<br />
		{{pep.detail}}
	</td>
</tr>

js部分就正常的写循环语句就行

var vm = new Vue({
						el: '#'+section,
						data: {
							peps:data1,
							//activeColor:data1.color
						}
					});

与循环语句相关的知识可以去查阅相关文档
这一部分最终要的部分其实还是这一句
:style="‘background-color:’+(pep.color)"
看好这一点就可以实现这个功能了

关注