zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    朋友
    Music
    Rnadom Teams
    Bone Collector(01背包)
    Common Subsequence LCS
    Copying Books
    Equal Sum Sets
    Checker Challenge
    棋盘问题
    油田(Oil Deposits)
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8065337.html
Copyright © 2011-2022 走看看