Vue学习：2.V标签综合2

接上一篇...

V标签综合使用：书架案例

功能：

实现列表的渲染和删除

思路：

使用 v-for 渲染数据列表，并在每个列表项内放置一个绑定了 del方法的“删除”按钮，点击按钮时会触发方法，根据传入的 ID 删除相应数据源中的项目。

代码：

html：

<div id="app">
        <h3>我的书架</h3>
        <ul>
            <li v-for="(item,index) in booklist" :ket="item.id">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
</div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                booklist: [
                    {id: 1, name: '《三体》', author: '刘慈欣'},
                    {id: 2, name: '《诗云》', author: '刘慈欣'},
                    {id: 3, name: '《人民的名义》', author: '祁同伟'},
                    {id: 4, name: '《狂飙》', author: '高启强'},
                ]
            },
            methods: {
                del(id){
                    this.booklist = this.booklist.filter(item => item.id != id)
                }
            }
        })
</script>