精华内容
下载资源
问答
  • vue循环
    千次阅读
    2022-01-14 19:02:05

    1.循环遍历对象

    1.1vue 在html里面循环遍历对象

    v-for=" (val, key , i) in dimItemMap" :key="key"
    val-每一项
    key -key值
    i-第几个

    <el-table-column prop="score" label="评分" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                  <span>
                    <span v-for=" (val, key , i) in scope.row.dimItemMap" :key="key">
                      {{val.score}}//score为键,val.score为值
                    </span>
               </span>
           </template>
    </el-table-column>
    

    1.2 在js里面forin遍历对象

    for…in 循环主要是为了遍历对象而生,不适用于遍历数组

    let data = [{ wiun2dvi: 232, wiun3dvi: 55, wiu4ndvi: 33, wiun1dvi: 24432 }];
        data.forEach((item,index)=>{
          for (const key in item) {
            console.log("item[key]",item[key]);//值
            console.log("key",key);//键
          }
        })
    

    2.循环遍历数组

    2.1 vue 在html里面循环遍历数组

    <el-table-column v-for="item in tableCol" :key="item.id" :prop="item.id" :label="item.name" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
               <span>{{scope.row.dimItemMap?scope.row.dimItemMap[item.id].name:""}}</span>
          </template>
    </el-table-column>
    
    <el-table-column prop="score" label="评分" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                  <span>
                    <span v-for=" (item, index) in scope.row.dimItemMap" :key="index">
                      {{item.score}}
                    </span>
               </span>
           </template>
    </el-table-column>
    

    2.2 在js里面for遍历数组

    let id = 1524466
    for (let i = 0; i < list.length; i++) {
            let a = list[i];
            if (a.id === id) {
              return a.name;
            } 
    }
    

    2.3 在js里面forof遍历数组

               let arr = [{
                    name: 12,
                    hello: "wsdfnioq",
                }, {
                    name: 12,
                    hello: "wsdfnioq",
                }, {
                    name: 12,
                    hello: "wsdfnioq",
                }]
                for (const i of arr) {
                    console.log("i", i);
                }
    //i {name: 12, hello: 'wsdfnioq'}
    // i {name: 12, hello: 'wsdfnioq'}
     //i {name: 12, hello: 'wsdfnioq'}
    
    let arr = [
        ['name', "张三"],
        ['地址', '北京'],
        ['手机', '123']
    ]
    for (const [value0, value1] of arr) {
        console.log('k', value0, value1);
    }
    // k name 张三
    // k 地址 北京
    // k 手机 123
    

    2.4 forin,不推荐对数组进行遍历

    let arr = ["lsadnkol", "klsmvaod", "lpsaojfoas"]
    for (const key in arr) {
        console.log("arr", key, typeof key, arr[key]);
    }
    // 0 string lsadnkol
    // 1 string klsmvaod
    // 2 string lpsaojfoas
    

    2.4 forEach() 函数遍历数组

    ①无任何返回,可改变原来数组中的内容
    ②循环次数:数组的长度
    ③不支持return,不需要return语句

    如下案例:给每个对象中添加age属性

        let forArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},]
         forArr.forEach((item,index) => {
            console.log("forEach循环==index==",index,item);
             item.age = 27
        })
    
        console.log("forArr==遍历后===",forArr)
       // forArr ---->[{name:'tom',sex:'man',age:27},{name:'linda',sex:'woman',age:27}]
    

    3.循环遍历字符串

    3.1for

    let s = "abcd"
    for (let i = 0; i < s.length; i++) {
          console.log(i, typeof i, s[i]); //i为索引,s[i]为值,typeof i 为number
    }
    //  0 number a
    //  1 number b
    //  2 number c
    //  3 number d
    

    3.2 forin

    let s = "abcd"
    for (const key in s) {
        console.log("key", key, typeof key, s[key]); //key为索引,s[key]为值,typeof key 为string
    }
    // 0 string a
    // 1 string b
    // 2 string c
    // 3 string d
    

    3.3 forof

    let s = "abcd"
    for (const i of s) {
        console.log("i", i);//i为值
    }
    // a 
    // b 
    // c 
    // d
    
    更多相关内容
  • 主要介绍了Vue循环中多个input绑定指定v-model实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • *父父组件(helloWorld.vue): <el type=text click=saveAll class=button>SAVE <promise ref=promiseFather></promise> [removed] import PromiseFather from './promiseFather' export default { name: ...
  • 主要介绍了vue循环中点击选中再点击取消(单选)的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue 循环加载数据并获取第一条记录的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章给大家详细分享了关于vue循环列表动态数据的处理方法以及相关知识点内容,有需要的朋友们参考下。
  • 主要为大家详细介绍了vue循环数组改变点击文字的颜色,非常实用的切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue循环套循环

    2022-04-20 20:38:53
    html <div v-for="(item,idx) in modal.data.catalog"> <div> <CheckboxGroup v-model="modal.data.catalog" > <Checkbox :label="item.label">{{item.label}}<....
    html
    
    <div v-for="(item,idx) in modal.data.catalog">
      <div>
         <CheckboxGroup v-model="modal.data.catalog" >
            <Checkbox :label="item.label">{{item.label}}</Checkbox>
         </CheckboxGroup>
      </div>
      <div>
          <CheckboxGroup v-model="modal.data.catalog" v-for="(item,idx) in item.children">
             <Checkbox :label="item.label">{{item.label}}</Checkbox>
          </CheckboxGroup>
      </div>            
     </div>
    
    js
     catalog:[
                        {
                            label: "用户管理",
                            children: [
                                {
                                    label: "医院1",
                                },
                                {
                                    label: "医院2",
                                },
                                {
                                    label: "医院3",
                                },
                                {
                                    label: "医院4",
                                }
                            ]
                        },
                        {
                            label: "用户管理1",
                            children: [
                                {
                                    label: "医院3",
                                },
                                {
                                    label: "医院4",
                                },
                                {
                                    label: "医院5",
                                },
                                {
                                    label: "医院6",
                                }
                            ]
                        },
                    ]

    效果图

     

    展开全文
  • vue循环组件

    2022-02-18 11:18:21
    效果图展示 <el-timeline v-for="(item,index) in items" v-bind:key="index"> <el-timeline-item :timestamp="(items[index].create_time)" placement="top"> <el-card>...{{it

    效果图展示
    在这里插入图片描述

    <el-timeline v-for="(item,index) in items" v-bind:key="index">
        <el-timeline-item :timestamp="(items[index].create_time)" placement="top">
          <el-card>
            <h4>{{items[index].title}}</h4>
            <p>{{items[index].remarks}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      export default {
       data: () => ({
    	items:[],
    	})
    

    数据存到items里面
    在这里插入图片描述

     show(){
            axios
            .post(`${config.API_URL}/#`, {
            }).then((result) => {
               for (let i = 0; i < result.data.data.length; i++) {
                 this.items[i] = result.data.data[i];
                 console.log(result.data.data[i]);
               }
            })
            .catch((err) => {
              console.log("捕获异常", err);
            });
         }
    
    展开全文
  • vue实现循环滚动列表

    2020-10-15 04:30:21
    主要为大家详细介绍了vue实现循环滚动列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue循环遍历

    千次阅读 2020-08-07 14:24:50
    Vue循环遍历 1.v-on介绍 作用 循环遍历 预期 Array | Object | number | string | Iterable (2.6 新增) 用法 alias in expression ## 2.v-for 遍历数组 <div id="app"> <ul> &...

    Vue循环遍历

    1.v-for介绍

    作用 循环遍历
    预期 Array | Object | number | string | Iterable (2.6 新增)
    用法 alias in expression

    2. v-for 遍历数组

    <div id="app">
      <ul>
        <li v-for="name in names">{{name}}</li>
      </ul>
    </div>
    <script>
      const vue = new Vue({
          el: '#app',
          data: {
            names: ['张三', '李四']
          },
      });
    </script>
    

    在这里插入图片描述
    使用过程中使用index

    <div id="app">
      <ul>
        <li v-for="(name, index) in names">{{index + 1}} {{name}}</li>
      </ul>
    </div>
    <script>
      const vue = new Vue({
          el: '#app',
          data: {
            names: ['张三', '李四']
          },
      });
    </script>
    

    在这里插入图片描述

    3.v-for遍历对象

    <div id="app">
      <ul>
    <!--    这样只能拿到属性的value,不能拿到key-->
        <li v-for="attribute in person">{{attribute}}</li>
      </ul>
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                person: {
                    name: '张三',
                    age: '12',
                    height: '160'
                },
            },
        });
    </script>
    

    在这里插入图片描述
    value 、 key 都获取

    <div id="app">
      <ul>
        <li v-for="(value, key) in person">{{key}}: {{value}}</li>
      </ul>
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                person: {
                    name: '张三',
                    age: '12',
                    height: '160'
                },
            },
        });
    </script>
    

    在这里插入图片描述

    value 、 key 和 index 都获取

    <div id="app">
      <ul>
        <li v-for="(value, key, index) in person">{{index + 1}}{{key}}: {{value}}</li>
      </ul>
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                person: {
                    name: '张三',
                    age: '12',
                    height: '160'
                },
            },
        });
    </script>
    

    在这里插入图片描述

    4.v-for是使用key和不使用key的区别

    官方推荐在使用v-for的时候,给对应的元素或组件添加上一个key属性
    1.遍历时不使用key
    在这里插入图片描述

    1.遍历时使用key
    在这里插入图片描述

    注意:
    1.所谓的位移其实是元素重新创建初始化,不用位移就是复用以前的元素。
    2.如果要使用key的话,不要用index,要保证key与内容的唯一标识性,因为index是会更新的,如果新增或者修改,那么用key就没什么意思了。

    key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。
    如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
    而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
    
    有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
    

    5.可以响应式的方法

    <div id="app">
      <ul>
    <!--    这样只能拿到属性的value,不能拿到key-->
        <li v-for="(name, index) in names" :key="name">{{name}}</li>
      </ul>
      <button @click="pushArray">push</button>
    
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                names: ['张三', '李四'],
            },
            methods: {
                pushArray() {
                    this.names.push("aaa");
                }
            }
        });
    </script>
    

    在这里插入图片描述

    5.1 注意直接修改数组元素时是不会响应式的

    <div id="app">
      <ul>
    <!--    这样只能拿到属性的value,不能拿到key-->
        <li v-for="(name, index) in names" :key="name">{{name}}</li>
      </ul>
      <button @click="changed">changed</button>
    
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                names: ['张三', '李四'],
            },
            methods: {
                changed() {
                    this.names[0] = 111;
                }
            }
        });
    </script>
    

    点击changed之后页面没有变化,可以数组元素已经变化了
    在这里插入图片描述

    5.2 以上问题的解决方案:

    <div id="app">
      <ul>
    <!--    这样只能拿到属性的value,不能拿到key-->
        <li v-for="(name, index) in names" :key="name">{{name}}</li>
      </ul>
      <button @click="changed">changed</button>
    
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                names: ['张三', '李四'],
            },
            methods: {
                changed() {
                  this.names.splice(0, 1, '111');
                  // Vue 内部实现的方法
                  Vue.set(this.names, 1, '222');
                }
            }
        });
    
    </script>
    

    在这里插入图片描述
    点击changed后:

    在这里插入图片描述

    5.3 以下方法都是响应式的:

    push() 向数组末尾添加一个元素
    pop() 删除数组中最后一个元素
    shift() 删除数组中第一个元素
    unshift() 向数组最前面添加一个或者多个个元素(参数是可变长度)
    splice() 删除元素:第二个参数传入你要删除几个元素(如果没穿,就删除后面所有元素) 替换元素:第二参数,表示我们要替换几个元素,后面是用于替换前面的元素 插入元素:第二个参数穿0,后面是插入的元素
    sort() 排序
    reverse() 内容反转
    展开全文
  • vue循环遍历map

    千次阅读 2022-04-11 11:21:36
    <div class="form-group row" v-for="(item,index) in paramsMap" :key="index"> <!-- index 为Key--> <label class="col-sm-2 col-form-label">{{index}}</label>... .
  • Vue 循环中使用 await

    2021-11-06 21:01:22
    async a(){ await this.b() } b() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('成功') }, 1000) }) } forEach 外面写 async forEach...for 不是并发操作 无需锁定每一次的循环
  • 主要介绍了vue中的循环对象属性和属性值用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue循环渲染接口数据

    2021-11-10 17:28:33
    最简单的vue循环渲染接口数据 app = new Vue({ el: '#app', data:{ sites:[] }, mounted(){ axios.get("url").then(response=>(this.sites=response.data.data)) }, }); <
  • vue循环渲染不同图片

    千次阅读 2022-01-20 14:49:53
    关于 Vue循环生成图片方法 先上基础 在 Vue 中 img 图片的 src 的路径有两种索引方法: 可以直接 <img src="路径" alt="一张图片"> 在 data 中 imgSrc: require(‘图片路径’) 然后 <img :src="imgSrc...
  • 今天小编就为大家分享一篇vue v-for直接循环数字实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下
  • vue循环生成div

    万次阅读 2020-07-20 09:41:57
    遇到了一个需求,需要展示一年12个月的日历,然后一行为一个div,需要循环生成4个div,刚开始我查了一下,不知道怎么入手,然后问了我一个做前端的同学,一分钟就解决了。 代码如下: <div v-for="item of 4" :...
  • 使用Vue循环input输入框的取值问题

    千次阅读 2021-12-23 16:13:18
    使用Vue循环input输入框的取值问题 使用Vue循环生成input输入框时如何动态绑定v-model ? 相信大家使用Vue动态循环生成input输入框时可能遇到过如下问题: Vue通过v-for可便捷的生成DOM结构,但循环input时会有一个...
  • vue的for循环使用方法

    2020-10-17 10:23:58
    在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤,有需要的朋友们跟着学习下。
  • Vue循环动态生成标签--小白教学

    千次阅读 2021-09-16 14:30:14
    今天写代码,使用Vue从数据库中动态获取数据,循环生成到页面。一直都会用,今天好好捋一下思路。 一:定义属性 首先在Vue实例中定义集合用于接收数据。注意:如果使用组件则必须使用data()回调函数。这点涉及到...
  • 今天小编就为大家分享一篇vue 解决循环引用组件报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,320
精华内容 34,528
关键字:

vue循环

友情链接: viqsblf.rar