额，刚开始用vue还是有点难懂的。现在在做一个简单的todolist，怎样做到点击 button 或者 a 来删除 list中的li呢，也就是绑定对应的li，然后就是一个 button 删除一个对应项 li 在以往的js中用闭包可以解决。现在用vue不知道咋整了。求说一下思路。要是能贴上源码就更好了

官方实例： TodoMVC Example

使用vue的一个小问题

vue跟以前的js或者jq方式和思维都不是一个概念，一个是操作数据的，一个是操作DOM的。
我简单写一个demo吧！下面我会打上注释，你看了就会了，思路没什么，就是往一个数组里面添加或者删除元素而已，数据改变了，视图也会更新，这就是MVVM框架的魅力！运行结果和代码如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                font-family: "微软雅黑";
                font-size: 14px;
            }
            
            input {
                font-size: 14px;
            }
            
            body,ul,div,html {
                padding: 0;
                margin: 0;
            }
            
            .main {
                width: 800px;
                margin: 0 auto;
            }
            
            li {
                list-style-type: none;
                line-height: 40px;
                position: relative;
                border: 1px solid transparent;
                padding: 0 20px;
            }
            
            li .close {
                position: absolute;
                color: #f00;
                font-size: 20px;
                line-height: 40px;
                height: 40px;
                right: 20px;
                cursor: pointer;
                display: none;
                top: 0;
            }
            
            li:hover {
                border: 1px solid #09f;
            }
            
            li:hover .close {
                display: block;
            }
            
            .text1 {
                box-sizing: border-box;
                width: 100%;
                height: 40px;
                padding-left: 10px;
                outline: none;
            }
        </style>
    </head>

    <body>
        <div id="app" class="main">
            <h2>小目标列表</h2>
            <div class="list">
                <h3>添加小目标</h3>
                <input type="text" class="text1" placeholder="输入小目标后，按回车确认" @keyup.13='addList' v-model="addText" />
            </div>
            <ul>
                <li v-for="(list1,index) in list" class="li1">
                    <div>
                        <span @dblclick="edit=list1">{{list1.name}}</span>
                        <!--把索引当参数，传进函数-->
                        <span class="close" @click='delectList(index)'>X</span>
                    </div>
                </li>
            </ul>
        </div>
    </body>
    <!--这个文件自己下载   https://github.com/vuejs/vue/blob/dev/dist/vue.js-->
    <script src="vue2.4.2.js"></script>
    <script type="text/javascript">
        var list = [
            { name: "HTML5"},
            { name: "CSS3"},
            { name: "vue"},
            { name: "react"}
        ];
        new Vue({
            el: "#app",
            data: {
                list: list,
                addText: ""
            },
            methods: {
                addList() {
                    //添加元素
                    this.list.push({
                        name: this.addText
                    });
                    this.addText = "";
                },
                delectList(index) {
                    //根据索引，删除数组的一个元素
                    this.list.splice(index, 1);
                }
            }
        });
    </script>
</html>

题主你也应该没怎么了解过vue。建议你先学习下vue。我给一个完整一点的栗子吧，这是我刚学vue的时候做的。里面的注释我都删除了，如果你能在代码上打上注释或者知道哪个代码是做什么的，说明vue的基础已经掌握了。运行效果和代码如下


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{font-family: "微软雅黑";font-size: 14px;}
            input{font-size: 14px;}
            body,ul,div,html{padding: 0;margin: 0;}
            .hidden{display: none;}
            .main{width: 800px;margin: 0 auto;}
            li{list-style-type: none;line-height: 40px;position: relative;border: 1px solid transparent;padding: 0 20px;}
            li .type-span{display: block;width: 10px;height: 10px;background: #ccc;margin: 14px 10px 0 0 ;float: left;}
            li.end .type-span{background: #09f;}
            li .close{position: absolute;color: #f00;font-size: 20px;line-height: 40px;height: 40px;right: 20px;cursor: pointer;display: none;top: 0;}
            li:hover{border: 1px solid #09f;}
            li:hover .close{display: block;}
            li .text2{height: 40px;padding-left: 10px;box-sizing: border-box;margin-left: 10px;width: 80%;display: none;}
            li.eidting .text2{display: block;}
            li.eidting div{display: none;}
            .text1{box-sizing: border-box;width: 100%;height: 40px;padding-left: 10px;outline: none;}
            .text1:after{display: block;width: 10px;height: 10px;content: "";}
        </style>
    </head>
    <body>
        <div id="app" class="main">
            <h2>小目标列表</h2>
            <div class="list">
                <h3>添加小目标</h3>
                <input type="text" class="text1" placeholder="输入小目标后，按回车确认" @keyup.13='addList' v-model="addText"/>
                <p>共有{{list.length}}个目标，{{noend==0?"全部完成了":'已完成'+(list.length-noend)}}{{noend?'，还有'+noend+'条未完成':""}}</p>
                <p>
                    <input type="radio" name="chooseType" @click='chooseList(1)' checked="true"/><label>所有目标</label>
                    <input type="radio" name="chooseType" @click='chooseList(2)'/><label>已完成目标</label>
                    <input type="radio" name="chooseType" @click='chooseList(3)'/><label>未完成目标</label>
                </p>
            </div>
            <ul>
                <li v-for="(list1,index) in useList" class="li1" :class="{end: list1.type,eidting: edit===list1}">
                    <div>
                        <span @click="list1.type=!list1.type" class="type-span"></span>
                        <span @dblclick="edit=list1">{{list1.name}}</span>
                        <span class="close" @click='delectList(index)'>X</span>
                    </div>
                    <input type="text" class="text2" v-model='list1.name' @keyup.esc='cancelEdit(list1)' @blur='edited' @focus='editBefore(list1.name)' @keyup.enter='edited' v-focus/>
                </li>
            </ul>
        </div>
    </body>
    <script src="vue2.4.2.js"></script>
    <script type="text/javascript">
        var list=[
                   {name:"HTML5",type:false},
                   {name:"CSS3",type:false},
                   {name:"vue",type:false},
                   {name:"react",type:false}
                ];
        new Vue({
            el: "#app",
            data: {
               list:list,
               addText:"",
               useList:list,
               edit:'',
               beforeEditText:""
            },
            computed:{
                noend:function(){
                    return this.list.filter(function(item){
                        return !item.type
                    }).length;
                }
            },
            methods:{
                addList(){
                    this.list.push({
                        name:this.addText,
                        type:false
                    });
                    this.addText="";
                },
                chooseList(type){
                    if(type===1){
                        this.useList=this.list
                    }
                    else if(type===2){
                        this.useList=this.list.filter(function(item){return item.type});
                    }
                    else{
                        this.useList=this.list.filter(function(item){return !item.type});
                    }
                },
                delectList(index){
                    this.list.splice(index,1);
                },
                cancelEdit(listobj){
                    listobj.name=this.beforeEditText;
                    this.edit='';
                    this.beforeEditText='';
                },
                edited(){
                    this.edit='';
                },
                editBefore(btext){
                    this.beforeEditText=btext;
                }
            },
            directives:{
                "focus":{
                    update(el){
                        el.focus();
                    }
                }
            }
        });
    </script>
</html>

使用vue的一个小问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？