使用v-html解决被转义的问题

最新推荐文章于 2023-09-21 11:37:26 发布

yaoxinsong

最新推荐文章于 2023-09-21 11:37:26 发布

阅读量1.7k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_23159841/article/details/107696316

版权

VUE 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<template>
	<div class="window-bg">
		<div class="box">
			<cube-nav-item v-for="item in navList" :key="item.id" :id="item.id" :title="item.title">
				<span class="iconfont item-iconfont" v-html="item.iconfont"></span>
			</cube-nav-item>
		</div>
	</div>
</template>

<script>
import CubeNavItem from "@/components/CubeNavItem";
export default{
	name: 'index',
	data(){
		return {
			navList: [
				{id: 1,iconfont: '&#xe660;',title: 'Blog'},
				{id: 2,iconfont: '&#xe656;',title: 'Music'},
				{id: 3,iconfont: '&#xe636;',title: 'Dome'},
				{id: 4,iconfont: '&#xe62f;',title: 'Me'}
			]
		};
	},
	components: {
		"cube-nav-item": CubeNavItem
	}
}
</script>

<style scoped >
.window-bg{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #238E52;
}
.box{
	display: flex;
	flex-wrap: wrap;
	width: 215px;
	height: 215px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -107px;
	margin-left: -107px;
}
.box .item{
	width: 100px;
	height: 100px;
	margin-left: 5px;
	border: 1px solid #74B559;
	color: #93C87B;
}
.box .item .iconfont-box{
	width: 28px;
	height: 28px;
	margin: 15px auto;
}
.box .item .item-iconfont{
	font-size: 26px;
	margin: 10px auto;
}
.box .item .title{
	width: 100px;
	font-size: 18px;
	text-align: center;
}
</style>