<div class="box"> <div class="first-line" v-for="(item, index) in arr1" :key="index"> <el-link class="text">{{ item }}</el-link> <el-divider direction="vertical" v-if="index != arr1.length - 1" ></el-divider> </div> </div>
时间: 2024-01-03 22:24:20 浏览: 26
这是一个 Vue.js 组件,使用了 Element UI 组件库中的 el-link 和 el-divider 组件。它根据数组 arr1 渲染出一组链接,每个链接之间用 el-divider 做了分隔。如果当前渲染的链接不是最后一个,则显示 el-divider 组件。整个组件放在一个 class 为 box 的 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 包裹渲染的每个文本和分隔线。