夜光带你走进Vue.js（三十二）擅长的领域

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102474628

夜光序言：

每一个人心中都深藏着一个人，你不知道对方是否生活得好与坏，但有时候，你怀念的却只是一个简单的名字，一段甜蜜而苦涩的相遇。

正文：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光：灵活使用之前学的，创建几个简单实例</title>

</head>
<style>
    /*  夜光：隐藏未编译的变量 */

    [v-cloak] {
        display: none;
    }

    *{
        margin:0;
        padding:0;
    }

    body{
        font:15px/1.3 'Open Sans', sans-serif;
        color: #5e5b64;
        text-align:center;
    }

    a, a:visited {
        outline:none;
        color:#389dc1;
    }

    a:hover{
        text-decoration:none;
    }

    section, footer, header, aside, nav{
        display: block;
    }

    /*-------------------------
    	嗯唔：订单表单
    --------------------------*/

    form{
        background-color: #61a1bc;
        border-radius: 2px;
        box-shadow: 0 1px 1px #ccc;
        width: 400px;
        padding: 35px 60px;
        margin: 50px auto;
    }

    form h1{
        color:#fff;
        font-size:64px;
        font-family:'Cookie', cursive;
        font-weight: normal;
        line-height:1;
        text-shadow:0 3px 0 rgba(0,0,0,0.1);
    }

    form ul{
        list-style:none;
        color:#fff;
        font-size:20px;
        font-weight:bold;
        text-align: left;
        margin:20px 0 15px;
    }

    form ul li{
        padding:20px 30px;
        background-color:#e35885;
        margin-bottom:8px;
        box-shadow:0 1px 1px rgba(0,0,0,0.1);
        cursor:pointer;
    }

    form ul li span{
        float:right;
    }

    form ul li.active{
        background-color:#8ec16d;
    }

    div.total{
        border-top:1px solid rgba(255,255,255,0.5);
        padding:15px 30px;
        font-size:20px;
        font-weight:bold;
        text-align: left;
        color:#fff;
    }

    div.total span{
        float:right;
    }
</style>

<!-- 夜光： v-cloak 隐藏未编译的变量，直到 Vue 实例准备就绪。 -->

<form id="main" v-cloak>

    <h1>Services</h1>

    <ul>

        <!-- 夜光：循环输出 services 数组, 设置选项点击后的样式 -->

        <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">

            <!-- 夜光：显示订单中的服务名，价格
                 Vue.js 定义了货币过滤器，用于格式化价格 -->

            {{service.name}} <span>{{service.price | currency}}</span>

        </li>
    </ul>

    <div class="total">

        <!-- 夜光：计算所有服务的价格，并格式化货币，有点东西 -->

        Total: <span>{{total() | currency}}</span>

    </div>

</form>
<body>



<script src="../js/vue.js"></script>
<script type="text/javascript">

    // 自定义过滤器 "currency".
    Vue.filter('currency', function (value) {
        return '$' + value.toFixed(2);
    });

    var demo = new Vue({
        el: '#main',
        data: {
            // 夜光：定义模型属性 the model properties. The view will loop
            // 夜光：视图将循环输出数组的数据
            services: [
                {
                    name: 'book1',
                    price: 300,
                    active:true
                },{
                    name: 'book2',
                    price: 400,
                    active:false
                },{
                    name: 'book3',
                    price: 250,
                    active:false
                },{
                    name: 'book4',
                    price: 220,
                    active:false
                }
            ]
        },
        methods: {
            toggleActive: function(s){
                s.active = !s.active;
            },
            total: function(){

                var total = 0;

                this.services.forEach(function(s){
                    if (s.active){
                        total+= s.price;
                    }
                });

                return total;
            }
        }
    });

</script>

</body>
</html>