<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>指令</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.color1{
color: red;
}
.gray{
background: gray;
}
.blue{
background: blue;
}
.green{
background: green;
}
</style>
</head>
<body>
<div class="" id="myVue">
<!--方法一：：class里直接判断 -->
<ul>
<li v-for="item in items" :class="[ {'gray': item.styles=='gray'}, {'blue': item.styles=='blue'}, {'green': item.styles=='green'}]">{{item.name}}</li>
</ul>
<!--方法二:利用computed计算属性判断-->
<ul>
<li v-for="item in items" :class='timeBarType(item.styles)'>{{item.name}}</li>
</ul>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var vm=new Vue({
el:"#myVue",
data:{
items: [
{ name: '张三' ,styles:"gray" },
{ name: '李四' ,styles:"blue"},
{ name: '王五' ,styles:"green"}
]
},
computed: {
timeBarType() {
return function(type) {
if(type == "gray") {return 'gray'};
if(type == "blue"){return 'blue'} ;
if(type == "green"){return 'green'} ;
}
}
}
})
</script>
</html>
转载于:https://www.cnblogs.com/zyb-722/p/10368878.html
2667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
