Vue实现ul中item 删除

2021-9-6    前端达人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    {{msg}}
    <div>
        <input v-model="txtValue">
        <button type="button" @click="handleSubmit">提交</button>
        <ul>
            <li v-for="(item,index) of list"
                :key="index"
                :index="index"  @click="deleteItem(index)" //传递下标值 >
                {{item}}
            </li>
        </ul>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello Vue!!',
            txtValue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.txtValue)
                this.txtValue =''
            },
            deleteItem: function (index) {
                //alert(index)
                this.list.splice(index,1) //通过下标删除 }
        }
    })
</script>
</body>
</html>




分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
来源:csdn

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档