todulist案例

最新推荐文章于 2022-06-30 01:02:23 发布

@晔

最新推荐文章于 2022-06-30 01:02:23 发布

阅读量323

点赞数

文章标签： vue.js es6 javascript

本文链接：https://blog.csdn.net/weixin_47258963/article/details/106431563

版权

下面是todolist案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="div">
        <input type="text" v-model="inputValue">
        <button v-on:click="submit">提交</button>

        <div>
            <ul class="todolist">
                <li v-for="(item,index) in list">
                    {{item}}&nbsp;&nbsp;
                    <button v-on:click="update(index)">修改</button>
                    <button v-on:click="del(index)">删除</button>


                </li>
               
            </ul>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            inputValue:"",
            list:[]
        },
        methods: {
            submit(){
    this.list.push(this.inputValue)
    this.inputValue = ""

            },
            del(index){
                this.list.splice(index,1)
            },
            update(index){
                var val = prompt("请输入新值：")
                this.list.splice(index,1,val)
            }
        },
    })
</script>
</html>

@晔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
todulist案例

下面是案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.boot
复制链接

扫一扫