vue入门程序，记事本。 数组的增删改查 和 分页功能。

<div id="app">
    <input type="text" @keyup.enter="add" v-model="input_value" placeholder="请输入">
    <ul>
        <li v-for="(item,index) in new_data">
            <span>{{ item }}<span @click="remove(index + (page - 1) * tiaomu)" style="font-size: 25px">×</span></span>
        </li>
    </ul>

    <span>一共有{{ data_list.length }}条</span>
    <br/>
    <div v-show="data_list.length>this.tiaomu">

        <button @click="up" :disabled="page===1">上一页</button>
        <span>当前第：{{ page }}页</span>
        <button @click="next" :disabled="page>=data_list.length/this.tiaomu">下一页</button>
    </div>

    <br />
    <button @click="clear_data">clear</button>
</div>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            data_list: [],
            input_value: null,
            page: 1,
            tiaomu: 3, // 一页显示多少条
        },
        methods: {
            // 添加元素
            add: function () {
                if (this.input_value == null) {
                    return;
                }
                this.data_list.push(this.input_value);
                this.input_value = null;
            },
			
            // 移除数组中指定index的元素。
            remove: function (index) {
                // 如果删除的元素是当前页的最后一个，则页数减一。
                if (this.page > 1 && Number.isInteger((this.data_list.length-1) / this.tiaomu) && index === this.data_list.length - 1) {
                    this.page--;
                }
                this.data_list.splice(index, 1);
            },
            // 下一页
            next: function () {
                this.page++;
            },
			
            // 上一页
            up: function () {
                this.page--;
            },
			
            // 清除数组
            clear_data: function () {
                this.data_list = [];
                this.page = 1;
            }
        },


        // 属性计算
        computed: {
            // 返回分页后的数组
            new_data: function () {
                return this.data_list.slice((this.page-1) * this.tiaomu, this.page * this.tiaomu);
            }
        }

    })
</script>