vue黑马之小黑的书架小案例

今天我为大家带来一个小案例,可以帮助你更好的了解v-for的使用
上代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小黑的书架title>
head>
<body>
    <div id="root">
        <ul>
            
            
            
            <li v-for="(item,index) in list" :key="item.id"> 
                
                <span>{{item.name}}span>
                <span>{{item.author}}span>
                
                <button @click="del(item.id)">删除button>
            li>
        ul>
    div>
body>
<script src="../../js/vue.js">script>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            list: [
                { id: 1, name: "《红楼梦》", author: "曹雪芹" },
                { id: 2, name: "《西游记》", author: "吴承恩" },
                { id: 3, name: "《水浒传》", author: "施耐庵" },
                { id: 4, name: "《三国演义》", author: "罗贯中" },
            ]
        },
        methods: {
            del(id){
                // filter过滤 我们可以使用filter过滤出 item中不等于传过来的参数id
                // 不会改变原数组 返回一个新数组 
                // 我们把过滤出来的新数组赋值给原数组
                this.list = this.list.filter(item=>item.id !== id)
            }
        }
    })
script>
html>

先不给大家看效果图,大家来看看我加key与不加key有什么区别
加key的情况下
vue黑马之小黑的书架小案例_第1张图片
不加key的情况下
vue黑马之小黑的书架小案例_第2张图片
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(vue.js,javascript,ecmascript)