uniapp系列-06简单的文字居中

新建目录及vue文件

uniapp系列-06简单的文字居中_第1张图片

引入

index.vue中引入,记得保存

uniapp系列-06简单的文字居中_第2张图片

加样式

uniapp系列-06简单的文字居中_第3张图片

.card{
	padding:20rpx 0;
	display: flex;
	justify-content: center;
	font-weight: bold;
}
.card-name{
	padding:0 20rpx;
	font-size: 32rpx;
}

增加多个文本,运用传参

这里需要把文字的引号''删掉,不然会显示到界面上

index.vue中修改,传过去

uniapp系列-06简单的文字居中_第4张图片

然后在Card.vue中编写函数接收

uniapp系列-06简单的文字居中_第5张图片

加个插槽,把view组件放进slot组件里

uniapp系列-06简单的文字居中_第6张图片

最终删了引号''的结果如图:
uniapp系列-06简单的文字居中_第7张图片

你可能感兴趣的:(javascript,前端,vue.js)