012——VUE中todos示例讲解class中应用表达式

<!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>

  

posted @ 2017-12-19 14:11  生如逆旅,一苇以航  阅读(578)  评论(0编辑  收藏  举报