v-for的一些操作

Yan_Gold

于 2022-09-24 23:20:58 发布

阅读量172

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Yan_Gold/article/details/127032562

版权

<!-- 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>
        new Vue({
            el:'#app',
            data:{
                list:['张毅凡','张祥俊','刘鑫','朱智成']                
            },
            methods:{
                add(){this.list.push('牛超')}
            }
        })
        
    </script>
   <!-- 原生写法
  for(let i = 0;i < list.length;i++){
        let li = document.creatElement('li')
        li.innerHTML = list[i]
        ul.appendChild(li)
    } -->

v-for遍历对象

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

v-for遍历数组

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

然后出现1到9

v-for中的key

<body>
    <script src="../vue.js"></script>
    <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>
       <!-- 现象：当我勾了个 “啊啊啊” 然后再下标1的位置添加了“德法”结果发现勾给了德法
                  ，啊啊啊自己勾没了
            原因：v-for会尝试最大限度的服用当前元素 ，导致状态绑定错乱
            解决：v-for后加上一个key属性，key绑定这个数据的唯一值（一般是id，不能是字符串和数组类型）-->
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'呃呃呃'},
                    {id:2,name:'啊啊啊'},
                    {id:3,name:'哦哦哦'},
                ]
            }
        })
    </script>
</body>

当然这个没啥问题，就不截图了，没啥东西，就这了，完了