vue实现简易留言板

Posted 2020-09-27

首先引入vue.js

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

布局

<div id="div">
    <input type="text" v-model="username" @keyup.enter="add()">
    <input type="button" value="按钮" @click="add()">
    <div v-show="this.arr.length ==0">暂无留言</div>
    <ul>
        <li v-for="item in arr">{{item}}
            <a href="javascript:;" @click="remove($index)">删除</a>
        </li>
    </ul>
</div>

js

 <script>
        window.onload = function () {
            new Vue({
                el: ‘#div‘,
                data: {
                    username: ‘‘,
                    arr: []
                },
                methods: {
                    add: function () {
                        this.arr.unshift(this.username);
                        this.username = ‘‘;
                    },
                    remove:function (index) {
                        this.arr.splice(index,1);
                    }
                }
            });
        }
    </script>