Vue简单入门 实现添加删除实例

Vue简单入门 实现添加删除实例

首先创建一个Vue实例 ，并引入vue

  <div id="app">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let zyy = new Vue({
            el: "#app",
            data() {
                return {
                }
            },
        })
    </script>

需要实现的效果为点击删除按钮删除当前的一项，通过输入框输入内容点击添加，添加到列表中。效果图如下。

删除实现思路:先为按钮绑定点击事件，获取到数组中当前点击的下标，用splice（）方法实现删除。代码如下。

  <div id="app">
 	 <ul>
            <li v-for="(item,i) in list">
                {{item.id}}
                <a :href="'zyy.html?id='+item.id">{{item.name}} </a>
                <button @click="del(i)">删除</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let zyy = new Vue({
            el: "#app",
            data() {
                return {
                   list: [
                        { id: 1001, name: 'zyy' },
                        { id: 1002, name: 'zdd' },
                        { id: 1003, name: 'zcc' },
                    ]
                }
            },
             methods: {
                del(i) {//根据获取到当前下标删除
                    this.list.splice(i, 1)
                }
              
            }
        })
    </script>

添加实现思路：根据v-model实现数据双向绑定，添加按钮获取到绑定的数据，通过push方法添加到数组中。最终代码如下。

 <div id="app">
        <input type="text" v-model="name">
        <button @click="add"> 添加 </button>
        <ul>
            <li v-for="(item,i) in list">
                {{item.id}}
                <a :href="'zyy.html?id='+item.id">{{item.name}} </a>
                <button @click="del(i)">删除</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    name:'',
                    list: [
                        { id: 1001, name: 'zyy' },
                        { id: 1002, name: 'zdd' },
                        { id: 1003, name: 'zcc' },
                    ]
                }
            },
            methods: {
                del(i) {
                    this.list.splice(i, 1)
                },
                add(){
                    this.list.push({
                        id:+new Date,
                        name:this.name
                    }),
                    this.name=''
                }
            },
        })
    </script>

注释：添加方法中的’ id:+new Date’是生成当前时间，为避免id重复。
this.name=’'为了每次添加后清空输入框，让name为空。