<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todos示例讲解class中应用表达式</title>
<script src="vue.js"></script>
</head>
<body>
<style>
.success{color: green}
.error{color: red;}
</style>
<div id="lantian">
<li v-for="v in news">
<span :class="v.status?'success':'error'">{{v.title}}</span>
<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
</div>
<script>
var app = new Vue({
el: '#lantian',
methods:{
changeStatus:function (item,status) {
item.status=status;
}
},
data: {
news:[
{title:'蓝天科技',status:true},
{title:'www.lantian.com',status:true},
]
}
});
</script>
</body>
</html>