简简单单todolist 留言板

todolist 留言板在这里插入图片描述

Document

留言板

    <div>
        

      <textarea name="" id="" cols="30" rows="10" v-model="inputvalue"></textarea>

        <button @click="submit" >保存</button>

        <div>
            请你留言:
            <ul class="q1">
                <li v-for="(item,index) in list">
                    {{item}}&nbsp;&nbsp;
                    <a @click="update(index)">修改</a>&nbsp;
                    <a @click="del(index)">删除</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            inputvalue: "",
            list: []
        },
        methods: {
            submit() {
                this.list.push(this.inputvalue)
                this.inputvalue = ""
            },
            del(index) {
                this.list.splice(index, 1)
            },
            update(index) {
                let val = prompt('请输入新值')
                this.list.splice(index, 1, val)
            }
        }



    })









</script>

猜你喜欢

转载自blog.csdn.net/weixin_48193717/article/details/106432253