Vue.js 综合

<!DOCTYPE HTML>

<html>

    <head>

        <title>vue.js 处理用户输入</title>

        <script src="../vue.js"></script>

    </head>

<body>

    <div id="app">

        <input v-model="newTodo" v-on:keyup.enter="addTodo" />

        <ul>

            <li v-for="todo in todos">

                <span>{{todo.text}}</span>

                <button v-on:click="removeTodo($index)">X</button>

            </li>

        </ul>

    </div>

        <script>

            new Vue({

                el:"#app",

                data:{

                    newTodo:"",

                    todos:[

                        {text:'add  some todos'}

                    ]

                },

                methods:{

                    addTodo:function(){

                        var text = this.newTodo.trim();

                        if(text){

                            this.todos.push({text:text});

                            this.newTodo = '';

                        }

                    },

                    removeTodo:function(index){

                        this.todos.splice(index, 1);

                    }

                }

            });

        </script>

</body>

</html>

效果：

aaarticlea/png;base64,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" alt="" />

巴特西

Vue.js 综合

最新文章

热门文章