元素标签的attr属性的巧妙利用（值得收藏）

前言

需求如图：

虽然可以通过一个标签，直接赋值，然后通过定位也能实现需求;但是另一种方式更巧妙，有时候可以通过少量代码实现多样的需求，把一个元素展示在盒子上的方法，通过使用元素的attr属性，巧妙的借助定位实现需求

<template>
 <div class="videoImgShow" :data-time="item.duration">

  <!--  item.duration 是从接口获取的值 -->
 </div>
 </template>
<style lang='sass' scoped>
.videoImgShow{
	 position:relative;
	 width:300px;
	 height:300px;
	 bcakground-color：pink;
   &::after {
       content: attr(data-time);  //通过attr属性实现内容在盒子上的展现
       position: absolute;
       bottom: 10px;
       right: 10px;
       color: #22b14c;
       font-size: 12px;             
                }
 }
</style>