<template> <div class="slider" @mouseover="stopAutoPlay" @mouseleave="setAutoPlay"> <div class="slider-list"> <div :class="['slider-item', setItemClass(index)]" v-for="(item, index) of list" :key="index" > <img :src="item" /> </div> <i @click="prev" class="iconfont icon-Left arrow arrow-left" style="font-size: 30px" /> <i @click="next" class="iconfont icon-Right arrow arrow-right" style="font-size: 30px" /> </div> <div class="dots"> <span v-for="(item, index) of list" :key="index" :style="setDotActiveStyl(index)" @mouseover="currentIndex = index" ></span> </div> </div> </template>

这是Vue组件的模板部分，主要包含以下内容：

1. `div.slider`：用于包裹整个轮播图组件
2. `div.slider-list`：用于包裹图片列表和左右箭头
3. `div.slider-item`：用于展示每张图片，通过`v-for`指令循环遍历`list`数组中的图片，并使用`:class`绑定动态的class样式
4. `img`：用于展示图片，通过`:src`指令绑定图片地址
5. `i.arrow-left`和`i.arrow-right`：用于展示左右箭头，通过`@click`绑定点击事件，分别触发`prev`和`next`方法
6. `div.dots`：用于展示轮播图下方的小圆点，通过`v-for`指令循环遍历`list`数组，使用`:style`绑定动态的样式，同时通过`@mouseover`事件绑定鼠标移入事件，触发`currentIndex`的改变。