列表渲染指令

最新推荐文章于 2024-04-07 11:47:36 发布

Chen_Wei_Sheng

最新推荐文章于 2024-04-07 11:47:36 发布

阅读量203

点赞数 1

文章标签： java 服务器前端

本文链接：https://blog.csdn.net/Chen_Wei_Sheng/article/details/126978829

版权

1.v-for遍历数组

<body>
    <!-- 【v-for】
语法:<标签 v-for='item in 数组'></标签>
作业:自动实现数组有多少个元素,就会产生多少这样的标签。 --> 
<div id="app">
    <button @click="add">在最后添加一个</button>
    <ul>
    <!-- 第一个参数是元素,第二个参数是下标。与名字无关。 -->
    <!-- 很多时候只是为了拿元素,可能用不到下标。 -->
    <li v-for="(item,index) in list">{{ item }}---{{ index }}</li>
    </ul>
</div> 
    <script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app", 
        data:{
            list:["刘备","关羽","张飞","赵云","黄忠"]
        },
        methods:{
        add(){
            this.list.push('马超')
        }
    }
})
//【原生写法】
// for (let i = 0 ; i <body list.length; i ++){
//	let li = document.createElement('li')	
//	li.innerHTML = list[i]	
//	ul.appendChild(li)	
// }
</script>
</body>

2.v-for遍历数字

<body>
    <div id="app">
        <!-- 遍历数字(指定次数的循环) -->
        <h2>以下是指定次数</h2>
        <ul>
            <!-- num是1到9 -->
            <li v-for="num in 9">{{ num }}</li>
        </ul>
    </div>
        
        <script src="../vue.js"></script>
        <script>
            new Vue({
                el:'#app'
        })
        </script>
</body>

3.v-for遍历对象

<body>
    <!-- v-for可以遍历对象
    语法:<标签 v-for="(val,key)in 对象"></标签>
        <标签 v-for="val in 对象"></标签> -->
<div id="app">
    <ul>
        <!-- 对象有多少个属性就会产生多少个这样的标签。 -->
        <li v-for="item in obj">{{ item }}</li>
        <!-- 第一个参数是属性值,第二个参数是属性名。 -->
        <!-- 跟名字无关,也可以简写只拿属性值。 -->
        <li v-for="(val,key) in obj">{{ val }}---{{ key }}</li>
    </ul>
</div> 
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app', 
            data:{
                obj:{
                    name:'jack', 
                    age:20, 
                    sex:'男'
                }
            }
        })
    </script>
</body>

4.v-for中的key

*key 的注意事项
key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key 的值不能重复）
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）
————————————————
版权声明：本文为CSDN博主「萤火虫的小尾巴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_53022813/article/details/124503864

<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'赵六'})">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                <input type="checkbox">
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
    <!--
    现象:当我勾了李四，然后在下标1的位置添加了赵六,结果发现勾给了赵六,李四自己没勾了。
    原因:v-for会尝试最大限度的复用当前元素,导致状态绑定错乱。
    解决:在v-for后加上一个key属性，key绑定这个数据的唯一值(一般是id,不能是字符串和数字类型)
    -->

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1, name:'战役'},
                    {id:2, name:'李四'},
                    {id:3, name:'计划'},
                ]
            }
        })
    </script>
</body>