做网站哪个系统最安全,长沙简界网络科技有限公司,昆明网站制作推荐,网站定制开发一般多久文章目录 一、最终效果#xff1a;二、完整页面代码 一、最终效果#xff1a;
选中的数据有阴影效果#xff0c;鼠标移动时也有阴影效果
二、完整页面代码
list-style-type: none是去掉无序标签前的点的样式
templatedivdiv classmy-new-lis… 文章目录 一、最终效果二、完整页面代码 一、最终效果
选中的数据有阴影效果鼠标移动时也有阴影效果
二、完整页面代码
list-style-type: none是去掉无序标签前的点的样式
templatedivdiv classmy-new-list-containerh3新增列表示例/h3ul classno-bulletliv-foritem in items:keyitem.id:class{ selected: selectedItem item.id }stylecursor: pointermouseoverhoveredId item.idmouseouthoveredId nullclickselectItem(item.id){{ item.name }}/li/ul/div/div
/templatescriptexport default {data() {return {items: [{ id: 1, name: 地块1 },{ id: 2, name: 列表项2 },{ id: 3, name: 列表项3 },{ id: 4, name: 列表项4 },{ id: 5, name: 列表项5 }// 更多列表项...],hoveredId: null, // 用于鼠标悬停时的idselectedItem: null, // 记录被选中项的id};},methods: {selectItem(id) {this.selectedItem id;console.log(this.selectedItem)},},};
/scriptstyle.my-new-list-container {margin: 20px 0;border-radius: 5px;padding: 10px;background-color: #f9f9f9;width: 200px;}.no-bullet {list-style-type: none;padding-left: 0;}li:hover,.selected {box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}/* 如果需要区别悬停和选中状态的阴影效果可以为.selected单独设置样式 */.selected {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 示例增强选中时的阴影效果 */}
/style
