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

解决思路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 T

ivylingling123

2839人浏览 · 2018-12-10 16:04:32

ivylingling123 · 2018-12-10 16:04:32 发布

解决思路

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^