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>

巴特西

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

最新文章

热门文章