Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色,一看就明白
2023-09-11 14:21:46 时间
最主要就是用到属性的绑定 :class (动态绑定多个class)
:class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',selectedId==k?'trselected':'']"
(k+1)%2==1?'trclock':'' 当前行是奇数行则使用 trclock样式;
curId==k?'trhover':'' 当curId==k时 trhover样式添加进当前TR,通过mouseenter mouseleave 两个函数来控制curId的值;
selectedId==k?'trselected':'' 当selectedId==k时 trselected 样式添加进当前TR,通过点击事件select(k)来设置selectedId的值;
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
margin: 20px;
font-family: Arial, "宋体";
font-size: 12px;
line-height: 20px;
color: #333333;
}
.table{
font-size: 13px;
word-break:break-all;
cursor: default;
BORDER: #FFFFFF 1px solid;
background-color:#FFFFFF;
border-collapse:collapse ;
border-Color:#E2B801;
}
.tdprimary{
padding: 2px;
width: 100px;
}
.trclock{
background-color: #ECF5FF;
}
.trhover{
background-color: #C2C2C2;
}
.trselected{
background-color: #62B0FF
}
</style>
</head>
<body>
<div id="app">
<table border="1" cellspacing="1" cellpadding="4" bordercolorlight=#CCCCCC bordercolordark=#FFFFFF class="table" pcolor='#FFFFE5'>
<tr :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',selectedId==k?'trselected':'']"
@mouseenter="enter(k)"
@mouseleave="leave()"
@click="select(k)"
v-for="(item,k) in list" :key="k">
<td class="tdprimary" v-for="(i,j) in item" :key="j">{{i}}</td>
</tr>
</table>
</div>
</body>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
curId:null,
selectedId:null,
list:[
[11,12,13,14,15],
[21,22,23,24,25],
[31,32,33,34,35],
[41,42,43,44,45],
[51,52,53,54,55],
[61,62,63,64,65]
]
},
methods:{
enter(id){
this.curId = id;
},
leave(){
this.curId =null;
},
select(id){
this.selectedId=id;
}
}
});
</script>
</html>
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- Vue_(组件)实例属性
- vue导出Excel文件(入门篇)
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue开发 - 将方法绑定到window对象,给app端调用
- 3-1 vue-resource基础介绍
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(二)-webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- vue.js3: 裁剪图片的一部分并保存(vue@3.2.37)
- vue指令:v-pre原样输出,不解析插值表达式
- 【视频】vue组件的局部注册
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- vue中assets和static的区别
- 090:vue+openlayers探究加载能力的极限,100万个点?
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 基于Java+SpringBoot+Vue前后端分离图书借阅系统设计与实现(有视频讲解)
- vue快速学习03、ant-design
- springboot+vue+mybatis-plus+axios实现商品的CRUD