例子
<style>
.current{
background-color:#ccc;
}
</style>
data:{
keyword:'',
myData:[],
now:-1 //当前选中项的索引
},
<li v-for="(value,index) in myData" :class="{current:index==now}">
{{value}}
</li>
<li v-for="(value,index) in myData" :class="{current:index/2==0}">
{{value}}
</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style属性</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
bb:'aa',
dd:'cc',
flag:true,
num:-2,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
}
});
}
</script>
<style>
.aa{
color:red;
font-size:20px;
}
.cc{
background-color:#ccc;
}
</style>
</head>
<body>
<div id="itany">
<!--
class属性
-->
<p class="aa">南京网博</p> -->
<!-- 可以访问，普通css方式 -->
<p :class="aa">南京网博</p> -->
<!-- 不可以，Vue的属性绑定时不能直接css样式 -->
<!-- 方式1:变量形式 -->
<p :class="bb">南京网博</p>
<!-- 方式2：数组形式，同时引用多个 -->
<p :class="[bb,dd]">南京网博</p>
<!-- 方式3：json形式，常用！！！ -->
<p :class="{aa:true,cc:flag}">南京网博</p> -->
<p :class="{aa:num>0}">南京网博</p>
<!-- 方式4：变量引用json形式 -->
<p :class="hello">南京网博</p>
<!--
style属性
-->
<p :style="[xx,yy]">itany</p>
</div>
</body>
</html>
