vue 语法积累

最新推荐文章于 2024-04-24 14:19:01 发布

未来会更好yes

最新推荐文章于 2024-04-24 14:19:01 发布

阅读量734

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/sinat_32448031/article/details/95069833

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍前端开发中常用的循环技巧，包括使用Underscore.js进行数据遍历、查找及过滤，解决数据刷新与编辑问题，以及母子页面间的数据传递与方法调用示例。同时，提供el-date-picker组件的使用案例。

1.循环


import _ from 'underscore';

_.each(allOptions, (value, key) => {
	optionsSelect[key] = value;
});
_.each(metaList, function (data) {
	if (data.parId!=='0'&&data.code!=='1001'){
		metaTree[0].children.push(data);
	}
})

2.循环中寻找指定条件的对象

_.find(metaList, function(data){ return data.parId==='0'||data.code==='1001'; })//直接返回对象
this.basisFilePros = _.reject(this.basisFilePros, function (data) {
          return data.id == item.id;
        });//移除指定对象
this.fundingOptions.filter(v=>v.label!='自定义金额');//移除指定对象

3.有时候aaa["sda"] = "34";会造成数据未刷新或者输入框不可编辑状况，需要改为

this.$set(this.systemConfig,data.configName, data.configValue);

4.母/子页面数据传递以及方法调用范例

母页面添加组件

<companyInfoDialog :info="info" @success="loadData" @refuse="handleRefuseEdit" ref="companyInfoDialog"></companyInfoDialog>



import companyInfoDialog from './companyInfoDialog'

export default {
    components: {
      companyInfoDialog,
    },
    data() {
      return {
        info: {}
      }
    },
    methods: {
        loadData(){
            
        },
        handleRefuseEdit(){
            
        }
    }
}

子页面调用代码：

export default {
    name: "companyInfoDialog",
    components: {
      imgCheckDialog,
    },
    props: {
      info: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
}



this.$emit('success');
this.$emit('refuse');

5.el-date-picker选择日期控件使用范例

<el-form-item label="发放开始时间" prop="">
        <el-date-picker class="w-100"
                      format="yyyy 年 MM 月 dd 日"
                      placeholder="请选择日期"
                      type="date"
                      v-model="info.releaseTime"
                      value-format="yyyy-MM-dd">
        </el-date-picker>
</el-form-item>