vue制作简易书架

使用vue制作简易书架

使用到了vue指令v-for, 其中通过filter对数组进行过滤实现了删除效果。

html代码

 <div id="book">
        <h3>书架</h3>
        <ul>
            <!-- key给元素添加 唯一标识，便于正确排序复用 -->
            <!-- key的值只能是字符串或数字类型 -->
            <!-- key的值必须具有唯一性 -->
            <!-- 推荐使用id作为key，不推荐使用index作为key（会变化） -->
            <li v-for="(item,index) in bookList" :key="item.id">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <!-- 注册点击事件，通过id进行删除数组中的对应项 -->
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>

 js代码：

    <script src="./vue.js"></script>
    <script>
        const book = new Vue({
            el: '#book',
            data: {
                bookList: [
                    { id: 1, name: '红楼梦', author: '曹雪芹' },
                    { id: 2, name: '西游记', author: '吴承恩' },
                    { id: 3, name: '水浒传', author: '施耐庵' },
                    { id: 4, name: '三国演义', author: '罗贯中' }
                ]
            },
            methods: {
                del(id) {
                    // console.log('删除', id);
                    // 通过id进行删除 , 对应项 => filter(不会改变原数组)
                    // filter：根据条件，保留满足条件的对应项，得到一个新数组

                    // console.log(this.bookList.filter(item => item.id !== id));
                    this.bookList = this.bookList.filter(item => item.id !== id);

                }
            }
        })

    </script>

效果展示：

 点击删除：