<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.red {
color: red;
}
.royalblue {
color: royalblue;
}
.aquamarine {
color: aquamarine;
}
.chartreuse {
color: chartreuse;
}
.crimson {
color: crimson;
}
</style>
</head>
<body>
<div id="test">
<div v-for="(item,index) in ary" :class="{'red': index == 0,'royalblue': index == 1,'aquamarine': index == 2,'chartreuse': index == 3,'crimson': index == 4}">
{{item}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data: {
ary:[1,2,3,4,5]
}
})
</script>
</body>
</html>
demo:https://github.com/TigerCui/jsDemo/tree/master/VueForBindClassDemo
网友评论