<div class="box"> <div class="second-line" v-for="(item, index) in arr5" :key="index"> <img src="/static/logo.png" alt="" width="12px" height="12px" /> <span class="text">{{ item }}} </span> <el-divider direction="vertical" v-if="index != arr5.length - 1" ></el-divider> </div> </div>
时间: 2023-10-06 12:13:08 浏览: 51
这也是一个 Vue.js 组件,和前面的几个代码段非常相似,只是在每个文本之前加了一个 img 标签,用于显示一个图片。图片的 src 属性指向一个名为 logo.png 的静态文件,alt 属性为空,宽度和高度都被设置为 12px。整个组件放在一个 class 为 box 的 div 中,使用了 class 为 second-line 的 div 包裹渲染的每个文本、图片和分隔线。
相关问题
<div class="box"> <div class="second-line" v-for="(item, index) in arr4" :key="index"> <span class="text">{{ item }}</span> <el-divider direction="vertical" v-if="index != arr4.length - 1" ></el-divider> </div> </div>
这也是一个 Vue.js 组件,和前面的几个代码段非常相似,只是渲染的数据源变成了数组 arr4。根据数组 arr4 渲染出一组文本,每个文本之间用 el-divider 做了分隔。同样地,如果当前渲染的文本不是最后一个,则显示 el-divider 组件。整个组件放在一个 class 为 box 的 div 中,使用了 class 为 second-line 的 div 包裹渲染的每个文本和分隔线。
<div class="box"> <div class="second-line" v-for="(item, index) in arr3" :key="index"> <span class="text"> {{ item }} </span> <el-divider direction="vertical" v-if="index != arr3.length - 1" ></el-divider> </div> </div>
这也是一个 Vue.js 组件,和上面的代码非常相似,只是渲染的数据源变成了数组 arr3。根据数组 arr3 渲染出一组文本,每个文本之间用 el-divider 做了分隔。同样地,如果当前渲染的文本不是最后一个,则显示 el-divider 组件。整个组件放在一个 class 为 box 的 div 中,使用了 class 为 second-line 的 div 包裹渲染的每个文本和分隔线。