VueJS 数据绑定简单实例

Question

首先引入 VueJS 的JS 文件

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

编写 HTML 模板

<div id="app">
    <input v-model="todo" 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>

绑定数据

var app = new Vue({
    el: '#app',
    data: {
        todo: '',
        todos: [{
                text: "this is a todo"
            }

        ]
    },
    ready: function() {

    },
    methods: {
        addtodo: function() {
            var text = this.todo.trim();
            console.log(1);
            if (text) {
                console.log(2);
                this.todos.unshift({
                    text: text
                });
                this.todo = '';
            }

        },
        removeTodo: function(index) {
            this.todos.pop(index, 1);
        }
    }
});

点击这里查看示例：https://www.wenjiangs.com/wp-content/uploads/2017/10/vuejs-bind-data.html