pizza.js/example_05.html at master · Codher/pizza.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
        <title>Vue.js Example 05</title>
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="styles/site.css">
        <script src="lib/[email protected]"></script>
    </head>

    <body>
        <div id="app">
            <div class="jumbotron">
                <div class="container text-center">
                    <p> Original Greeting: "{{ greeting }}"</p>
                    <p> Reverse Greeting: "{{ reverseGreeting }}"</p>
                </div>
            </div>
        </div>
        <script>
            /**
                A computed field lets us compose a field.

                In this case we create a field called: "reverseGreeting".

                reverseGreeting is being computed ;)

                from "greeting" which we then reverse.

                The computed field will update every time the field it depends on changes,
                as opposed to "methods", that update only when we tell them to.

                So sometimes it is more convenient to created computed fields
                (which can be composed / computed from different things) instead of function.
            */
            var app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        greeting: 'Pizza !'
                    }
                },
                computed: {
                    reverseGreeting: function () {
                        return this.greeting.split('').reverse().join('');
                    }
                }
            });
        </script>
    </body>
</html>
<!--
    Example 05:
        Make 3 different kind of computed Greetings:
            - Reverse
            - Uppercase
            - Appending Hello to the beginning
-->