精华内容
下载资源
问答
  • vuefor循环
    2021-11-23 16:35:27

    v-for的方法就不写了
    下面是在方法内判断

    data.data.findIndex((item,i)=>{   //data.data是要循环的数组
     		var reg = RegExp(e);    //e是判断的内容
     		if(reg.test(item.id) == true){ 
                console.log("----------------------")
     		}
    })
    
    更多相关内容
  • <!--接口附表参数--> <el-divider content-position="left">接口参数信息</el-divider> <el-row> <el-button style="margin:2% 3%;" type="primary" plain .../el-but.
    <!--接口附表参数-->
    <el-divider content-position="left">接口参数信息</el-divider>
    <el-row>
      <el-button
        style="margin:2% 3%;"
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="addFrame"
      >新增</el-button>
      <div v-for="(item,index) in form.dataForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="中文名"  :prop="`dataForm.${index}.csmc`" :rules="rules.csmc">
              <el-input v-model="item.csmc" placeholder="请输入中文名" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="参数类型" :prop="`dataForm.${index}.cslx`" :rules="rules.cslx" >
              <el-select v-model="item.cslx" placeholder="请选择参数类型" clearable size="small"   style="width: 100%">
                <el-option
                  v-for="dict in cslxOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              style="margin-left: 25%;margin-top: 4%"
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="deletecsjh(index)"
            >删除</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="参数名"  :prop="`dataForm.${index}.csbm`" :rules="rules.csbm">
              <el-input v-model="item.csbm" placeholder="请输入参数名" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="参数值"  :prop="`dataForm.${index}.csz`" :rules="rules.csz">
              <el-input v-model="item.csz" placeholder="请输入参数值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="是否必填">
              <el-radio-group v-model="item.sfbt">
                <el-radio :label=0>必填</el-radio>
                <el-radio :label=1>不必填</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-row>

    data() {
      return {
    // 表单参数
    form: {
      dataForm: [],
    },
    // 表单校验
    rules: {
      cslx:[
        { required: true, message: "参数类型不能为空", trigger: "change" }
      ],
      csmc:[
        { required: true, message: "中文名不能为空", trigger: "change" }
      ],
      csbm:[
        { required:true,pattern:/(^_([a-zA-Z0-9]_?)*$)|(^[a-zA-Z](_?[a-zA-Z0-9])*_?$)/, message: '格式不正确;提示:【首位可以是字母以及下划线。首位之后可以是字母,数字以及下划线。下划线后不能接下划线】', trigger: 'blur' }
        // { required: true, message: "参数名不能为空", trigger: "change" }
      ],
      csz:[
        { required: true, message: "参数值不能为空", trigger: "change" }
      ],
      sjylx: [
        { required: true, message: "数据源类型不能为空", trigger: "change" }
      ],
      sjy: [
        { required: true, message: "数据源不能为空", trigger: "change" }
      ],
      jkmc: [
        { required: true, message: "接口名称不能为空", trigger: "blur" }
      ],
      jkdz: [
        { required: true, message: "接口地址不能为空", trigger: "blur" },{validator:validateIP, trigger: "blur"}
      ],
    },

      }

    }

    methods: {
    //添加
    addFrame() {
      var list = {
        csbm: null,
        csmc: null,
        cslx: null,
        csz:null,
        sfbt: 1,
      };
      this.form.dataForm.push(list);
    },
    //删除
    deletecsjh(index){
      this.form.dataForm.splice(index,1)
    },
    }
    展开全文
  • li v-for='item in items' @click="toggle(item)"> <span v-if='item.show'>{{item.content}}</span> </li> </ul> new Vue({ el: '#app', data: function() { return { items: [{ ...

    在这里插入图片描述
    点击每一列,可以展开效果

    在这里插入图片描述

    实现原理:

    方法1

    <ul id="app">
     <li v-for='item in items' @click="toggle(item)">
      <span v-if='item.show'>{{item.content}}</span>
     </li>
    </ul>
    new Vue({
     el: '#app',
     data: function() {
      return {
       items: [{
        content: '1 item',
        show: true
       }, {
        content: '2 item',
        show: true
       }, {
        content: '3 item',
        show: true
       }]
      }
     },
     methods: {
      toggle: function(item) {
          item.show = !item.show;
      }
     }
    })
    
    

    方法2

    <template>
        <div class="test-wrapper">
            <div class="article-list-item" v-for="(item,index) in list" :key="index"
            @click="ArticleDetail(index)">
                <div class="shareAnimate" v-show="activeIndex===index">
                    {{item.name}}
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        name: "test",
        data() {
            return {
                activeIndex: -1 // 初始化点击的索引值
            };
        },
        methods: {
            ArticleDetail(index) {
                this.activeIndex = index;//点击对于展开
               //this.activeIndex = this.activeIndex == index ? -1 : index; 这个是点击对于展开与对于隐藏 可以点击2次
            }
        }
    }
    </script>
    
    

    参考链接https://blog.csdn.net/qq_24147051/article/details/95645189

    展开全文
  • vue for循环中按顺序执行axios请求

    千次阅读 2021-12-15 10:40:13
    **vue for循环中按顺序执行axios请求** 需求:前端利用for循环遍历一个接口获取信息,利用promise可以保证每次接口遍历正常后统一保存返回的数据

    vue for循环中按顺序执行axios请求
    需求:前端利用for循环遍历一个接口获取信息,利用promise可以保证每次接口遍历正常后统一保存返回的数据

    正常使用js和ajax组合中用 闭包就可以实现for循环按顺序执行请求地址操作,但是vue中不可以,所以接下来是使用vue3写的demo,大家可以参考参考

    1:封装使用promise

     return new Promise(function (resolve,reject){
         axios
               .get(val)
               .then((response) => {
                   console.log(response);
                   resolve(response);
               })
       }).catch(err=>{
    })
    

    2: 把返回结果存入数组

      let data = [];
      for(let i = 0; i < pathList.length; i++){
           let result = getAxios(pathList[i].path);
           data.push(result);
       }
    
    

    3: 再用Promise.all的方法进行解析

    Promise.all(data).then(itemList => {
       console.log(itemList) //itemList返回的数据是按顺序的
         //执行自己接下来的操作
         //doSomething
     })
    

    完整代码:

    let pathList = [
             {name: '请求1', path: 'http://xxxxxx1'},
             {name: '请求2', path: 'http://xxxxxx2'},
             {name: '请求3', path: 'http://xxxxxx3'},
             {name: '请求4', path: 'http://xxxxxx4'}
     ]
     const getData = ()=>{
         let data = [];
         for(let i = 0; i < pathList.length; i++){
             let result = getAxios(pathList[i].path);
             data.push(result);
         }
    
         Promise.all(data).then(itemList => {
             console.log(itemList) //itemList返回的数据是按顺序的
             //执行自己接下来的操作
             //doSomething
         })
     }
    
     const getAxios = (val)=>{
         return new Promise(function (resolve,reject){
             axios
                 .get(val)
                 .then((response) => {
                     console.log(response);
                     resolve(response);
                 })
         }).catch(err=>{
    
         })
     }
    
    展开全文
  • vuefor循环使用方法

    2020-10-17 10:23:58
    在本篇文章里小编给大家整理了关于vuefor循环使用方法和步骤,有需要的朋友们跟着学习下。
  • vue for循环中key的作用

    2021-08-03 16:35:54
    key 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。(diff算法) (1)如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。(默认将index作为...
  • vue for循环列表(插槽)输入数据操作 1、给循环的每一行的编辑框添加chang事件 输入框:参数(数据的唯一key,绑定的键名,$event.target.value值) 下拉框:参数(数据的唯一key,绑定的键名,$event值) HTML部分...
  • 解决思路:for循环内使用axios请求数据并赋值到数组 问题:赋值数组在循环外console为空白 原因:axios属于异步操作,for属于同步操作,axios还没处理完,for就结束了,自然console里没有任何数据了 解决方案: ...
  • ) } for: async tidyData(){ for(let item2 of item.categorys){ // 款式选项数据整理 let customModelList = await this.tidyDataCustom(item2) } } forEach属于并发操作,所以需要锁定住每一个循环体,而for不是...
  • 最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能,这个...我们使用vue的:class来进行class的绑定。:class=”`comment-stars-width`+s.score” 然后把前面需要的属性前缀用 “包裹起来,后面的值用+号连起来,这
  • <el-form-item label="教学秘书" prop="secretaryId" :label-width="dialogFormLabelWidth" > ..
  • 今天小编就为大家分享一篇vue 取出v-for循环中的index值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset=utf-8> <title>v-for在线测试...
  • 今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue v-for直接循环数字实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • li v-for="(item,index) in 3"> > <input type="text" v-model="num[index]"> > </li> >data: { num:[], }, > 方法: > clickMe(){ > console.log(this.num) >...
  • 一 、问题如下: [Vue warn] Avoid using non-primitive value as key, ...以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • Vue for循环展示不同的css样式

    千次阅读 2020-10-30 09:17:59
    div v-for="(item,index) in listObj" :key="index"> <div style="height:60px;float:left" v-bind:class="{urgent:item.status==1,moderate:item.status==2,idle:item.status==3}"> </div> ....
  • vue for循环一次循环两条内容

    千次阅读 2020-08-13 17:49:46
    ul v-for="(item,index) in items"> <slot v-if="index<items.length&&index%2==0> <li>{{items[index].name}}</li> <li v-if="index<items.length-1">{{items[index+...
  • for循环一个列表,列表中有上传图片组件时,点击一个上传组件,上传完图片后,change事件触发两次。 <li v-for="(item, index) in list" :key="index"> <div> <div>1</div> <div>...
  • 本文实例讲述了vue data存储数据及v-for循环用法。分享给大家供大家参考,具体如下: vue data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • vue for循环取值时日期格式化问题

    千次阅读 2020-11-16 10:17:57
    div v-for="(item,index) in showOpinionLists" :key="index" class="pagination-list"> <!--此处代码省略--> ...... <div class="pagination-date"> <div :style="item.status ===
  • 一. 业务场景: 一个title 处 可能有 一个...按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> ...
  • 例:求后台返回数据this.dataInfo 中某个字段(item.totalSum)的和,只需添加computed,然后模板中直接可以使用totalSumAll (不需要再data中声明) computed:{ totalSumAll(){ let totalSumAll = 0;...
  • template v-for="(item, i) in aa" > <div style="width:100%;display: flex;justify-content: flex-start;align-items: center;" v-if="i%5==0" > <div style="width: 19%;display: flex;justify-...
  • 循环数据展示图片 <div style="width: 50%;height: 145px;text-align: center;" class="img" v-for="item in imgArr" :key="item.ID"> <img @click="sonimg($store.state.imgSrc + item.CNPICTURGUID)" ...
  • 但是往往所有v-for循环出的元素都会变化。如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: ()'> <span>{{item.name}} css: .addclass{ color : red;...
  • Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每...
  • 1.v-for用来循环的数组怎么发生变化可以被vue检测到: push、pop、shift、unshift、splice、sort、reverse等方法可以被检测到 vue对于这些方法的处理是重写了这些方法,并在最后会触发一次notify方法来通知这个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,602
精华内容 23,040
关键字:

vuefor循环