VUE小白入门记录我的学习路（2）V:for 列表操作、变异方法、splice/filter/concat/slice

最新推荐文章于 2023-02-09 14:47:00 发布

wendyw1999

最新推荐文章于 2023-02-09 14:47:00 发布

阅读量411

点赞数

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/wendyw1999/article/details/106235893

版权

本文是Vue小白入门系列的第二篇，主要讲解了如何使用V-for进行列表操作，包括最简单的循环、列表就地更新和count循环。此外，还介绍了在原有数组基础上操作的变异方法，如push、splice、concat和slice，以及通过filter创建新数组的方法。文中通过实例展示了这些概念的用法。

摘要由CSDN通过智能技术生成

文章目录

列表

列表

V:for

最简单的循环

<body>

    <div id="didi-navigator">
        <ul>
            <li v-for="tab in tabs">
                {
  { tab.text }}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var v = new Vue({
    
            el: '#didi-navigator',
            data: {
    
                tabs: [
                    {
     text: '巴士' },
                    {
     text: '快车' },
                    {
     text: '专车' },
                    {
     text: '顺风车' },
                    {
     text: '出租车' },
                    {
     text: '代驾' }
                ]
            }
        })

    </script>
</script>
      
</body>

实现之后：

· 巴士
· 快车
· 专车
· 顺风车
· 出租车
· 代驾

我们可以修改v.tabs来修改这个列表

列表“就地更新”

当数据项的顺序发生变化，比如下面这个列表：

 李斯

 始皇帝

 赵高

 韩非子

 荀子

我们要在李斯前面添加一个人名，那么所有的数据项都需要往下移一个。这是十分耗时耗力的。

就地更新将不会移动DOM元素，而是就地更新每个元素。这个模式比普通移动DOM更加高效。

为了给Vue一个提示，以便他能跟踪每个节点的身份，我们需要提供一个唯一key属性。key可以实number或者string。

<div id="app">
        <div>
            <label >Id:
                <input type="text" v-model="id">
            </label>
            <label >Name:
                <input type="text" v-model="name">
            </label>
    
            <input type="button" value="添加" @click="add">
        </div>
        <!--注意：v-for循环的时候 key 属性只能使用 number 或 string-->
        <!--注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定key的值-->
        <!--在组建使用v-for循环的时候或者在一些特殊情况中，如果 v-for 有问题，必须在使用
        v-for的同时，指定唯一的字符串/数字类型 :key 值-->
        <p v-for="item in list2" v-bind:key="item.id">
            <input type="checkbox">
            {
  {item.name}}
        </p>
    </div>
    <script>
        //创建Vue实例
        var vm = new Vue({
    
            el:'#app',
            data:{
    
                id:'',
                name:'',
                list2:[
                    {