vue 传入html元素 v-html

最新推荐文章于 2025-04-24 11:55:09 发布

原创最新推荐文章于 2025-04-24 11:55:09 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

javascript 同时被 3 个专栏收录

33 篇文章

订阅专栏

layui

11 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文探讨了模块化UI设计的概念，如何通过不同颜色和图标组合来表达信息，以及在前端开发中实现这一设计的方法。文章详细介绍了使用Vue.js进行模块化设计的实践，包括动态绑定样式和内容，以及如何通过v-if和v-else指令处理不同的显示情况。

<ul class="layui-row layui-col-space10">
	<li class="layui-col-xs6" v-for="module in item.modules">
		<a href="javascript:;" class="layadmin-backlog-body">
			<h3 v-bind:style="{color:module.color}">
				<span v-html="module.icon"></span>
					<template v-if="module.children.length > 1">
						{{module.children[0].name}} / {{module.children[1].name}}
					</template>
					<template v-else="">
						{{module.children[0].name}} 
					</template>
			</h3>
			<p align="center">
				<cite v-bind:style="{color:module.color}">
						<template v-if="module.children.length == 2">
							{{module.children[0].value}} / {{module.children[1].value}}
						</template>
						<template v-else="module.children.length == 1">
							{{module.children[0].value}} 
						</template>
				</cite>
			</p>
		</a>
	</li>
</ul>