一.vue在单双行显示不同的样式

最新推荐文章于 2024-04-23 09:39:00 发布

ivylingling123

最新推荐文章于 2024-04-23 09:39:00 发布

阅读量2.7k

点赞数 1

分类专栏： js框架

本文链接：https://blog.csdn.net/ivylingling123/article/details/84941546

版权

js框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

解决思路

1.vue在遍历列表时怎么区分是单行还是双行，通过查阅资料vue的v_for in遍历的时候有一个index下标从1开始,通过下标能被2整除的就是双行
2.vue怎么改变元素的样式，通过:class改变元素的class属性或者通过v-bind:style改变便签的style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="vue.js"></script>
	<style>
		.on {
			background: #cdcbff;
		}
		.off {
			background: #fefdff;
		}
	</style>
</head>
<body>
<p>第一个实验：使用vue在单双行显示不同的样式，解决思路</p>
<p>1.vue在遍历列表时怎么区分是单行还是双行，通过查阅资料vue的v_for in遍历的时候有一个index下标从1开始,通过下标能被2整除的就是双行</p>
<p>2.vue怎么改变元素的样式，通过:class改变元素的class属性或者通过v-bind:style改变便签的style属性</p>
<div id="app-4">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th width="190">奖品名字</th>
			<th align="left">奖品值</th>
			<th align="center">奖品获得人</th>
			<th align="center">创建时间</th>
			<th align="center">奖品id</th>
			<th align="center">点击事件</th>
		</tr>
		</thead>
		<tbody id="luckeyList"  v-for="(todo,index) in todos" :class="{on:index%2==0,off:index%2!=0}">
		<tr><td align="center">{{ todo.name }}</td>
			<td>{{ todo.value }}</td>
			<td align="center">{{ todo.username }}</td>
			<td align="center">{{ todo.c_time }}</td>
			<td align="center">{{ todo.id }}</td>
			<td align="center"><button  @click = "clickHaha(todo)">点击</button></td>

		</tr>
		</tbody>
</table>

</div>
<script>
	var app4 = new Vue({
		el: '#app-4',
		data: {
			todos: [
				{"name":"ivy0","value":"1","id":"0","username":"A**nn","code":"score","c_time":"12-10 11:40:26"},
				{"name":"ivy1","value":"1","id":"1","username":"F**a3","code":"score","c_time":"12-10 11:37:45"},
				{"name":"ivy2","value":"1","id":"2","username":"F**a3","code":"reward_money","c_time":"12-10 11:37:33"},
				{"name":"ivy3","value":"1","id":"3","username":"默**","code":"reward_money","c_time":"12-10 11:32:38"},
				{"name":"ivy4","value":"1","id":"4","username":"默**","code":"score","c_time":"12-10 11:29:55"},
				{"name":"ivy5","value":"1","id":"5","username":"藤**03","code":"score","c_time":"12-10 11:15:09"}
			]
		},
			// 在 `methods` 对象中定义方法
			methods: {
				clickHaha: function (event) {
					alert('Hello ' + event.id + '!')

				}
				
				}
	
		//===========================
	})
</script>
</body>
</html>

ivylingling123

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
一.vue在单双行显示不同的样式

解决思路1.vue在遍历列表时怎么区分是单行还是双行，通过查阅资料vue的v_for in遍历的时候有一个index下标从1开始,通过下标能被2整除的就是双行2.vue怎么改变元素的样式，通过:class改变元素的class属性或者通过v-bind:style改变便签的style属性&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
复制链接

扫一扫