软糖

Vue2-1 basic

Posted on |

Basic Example

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
<!DOCTYPE html>
<html>
<body>
    <div id="root">
        <ul>
            <li v-for="n in names" v-text="n"></li>
        </ul>
        <input id="input" :type="inputType" v-model="newName"/>
        <button @click="addName">{{ label }}</button>
        
        <h1 v-text="reversedMessage"></h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                label: 'Add Name',
                inputType: 'text',
                newName: '',
                names: ['Alice', 'Bob', 'Jane', 'Jack'],
                message: 'Hello World'
            },
            methods: {
                addName() {
                    this.names.push(this.newName)
                    this.newName = ''
                }
            },
            computed: {
                reversedMessage() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>