vue.js 根据select框的内容显示或隐藏div

根据下拉框的显示内容显示或隐藏div,非选中事件,而是别的页面跳转过去的,请问是使用v-if来实现的么

1个回答

是用v-if来实现,但是问题描述逻辑还是有点乱

qq_26744901
正在输入代码中 回复chronomancy: 理论上只有触发了数据绑定,不管事if或者show都会去执行的,重新渲染
2 年多之前 回复
chronomancy
chronomancy 是这样,表单的内容在编辑的时候可以自动获取到,在下拉框选择或者显示某个option时显示或隐藏部分div,我现在用的是@change和v-show,请问用v-if该如何实现,替换v-show的话似乎不能成功
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js select 多级联动 动态显示option
![图片说明](https://img-ask.csdn.net/upload/201912/17/1576546969_658423.jpg) 出题章节后面的下拉框里面选中的值,在其他的下拉列表中剔除 例如,在第一个select选中Java,其余的都不显示Java选项,包括新添加的部分 或者说在点击保存的时候校验一下select的选中值不能有重复的,如果有就提示用户哪几个重复 代码部分如下 ```vue <el-dialog :title="titleDialog" :visible="dialogFormSection" :before-close="cancelSection" width="1000px"> <el-form :model="formSection" :rules="sectionRules" ref="formSection"> <el-form-item label="选择题型:" :label-width="labelWidth" prop="questionType"> <el-select v-model="formSection.questionType" @change="selectQuestionType"> <el-option v-for="item in questionTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="部分名称:" :label-width="labelWidth" prop="sectionName"> <el-input v-model="formSection.sectionName" style="width: 500px"></el-input> </el-form-item> <el-form-item label="总题目数量:" :label-width="labelWidth" prop="questionScore" id="allQuestion-content"> <span>{{allQuestionNum}}</span> <span style="margin-left: 50px"> 每题分数 <el-input v-model="formSection.questionScore" style="width: 80px;margin-left: 10px"></el-input> 分 </span> <span style="margin-left: 50px">总分数:{{allScore}}分</span> <el-button type="text" style="float: right" @click="addProblemRules">添加出题章节</el-button> </el-form-item> <div v-for="(item,index) in sectionData" :key="item.id" class="addSection-content"> <div class="content"> <div style="margin-top: 10px"> {{index+1}}、出题章节(多选): </div> </div> <div class="content"> <el-select style="width: 170px" multiple collapse-tags v-model="item.repositorySectionIdList" @change="changeRepositorySectionId(item.repositorySectionIdList, index)"> <el-option v-for="item1 in courseChapterOptions" :key="item1.id" :value="item1.id" :label="item1.name"></el-option> </el-select> </div> <div class="content"><div style="margin-top: 10px">出题数量:{{item.partStrategyQuestionNum}}</div></div> <div class="content" v-for="(item2,index2) in item.automaticRuleDifficultList" :key="index2"> <span> {{item2.difficultName}} <el-input class="difficult-content" v-model.number="item2.difficultNum"></el-input>/ <span v-for="(item3,index3) in sectionQuestionArr[index]" :key="index3" >{{(item3.difficult === item2.diffcultType) ? item3.quantity : ''}}</span> </span> </div> <div class="content"><el-button type="text" @click="deleteChapter(item,index)">删除</el-button></div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitSection">保 存</el-button> <el-button @click="cancelSection">取 消</el-button> </div> </el-dialog> addProblemRules(){ this.$refs.formSection.validate((valid) => { if(valid){ //把请求回来的难度list放到sectionData中,用于显示 // for(let i=0,len=(this.sectionData.length)+1;i<len;i++){ this.automaticRuleDifficultList.forEach(e=>e.difficultNum = 0); this.sectionData.push({ //由于vue数据双向绑定问题,automaticRuleDifficultList会动态改变,不能区分数组项 //进行转换 automaticRuleDifficultList:JSON.parse(JSON.stringify(this.automaticRuleDifficultList)), }) let tempArr = new Array(); for(let i=1;i<6;i++){ let obj = Object({quantity: 0, difficult: i}); tempArr.push(obj); } this.sectionQuestionArr.push(tempArr); } }) }, ```
vue使用v-for循环直接使用方法获得的数组问题
vue使用v-for循环直接使用方法获得的数组,代码 ``` <div id="test"> <select placeholder="请选择"> <template v-for="(item,index) in getList('a')"> <option v-if="item" :label="item" :value="item"></option> </template> </select> <input v-model="str"/> </div> <script> var test = new Vue({ el:"#test", data:{ arr:{ a:[1,2,3,4], b:[5,6,7,8] }, str:"" }, methods:{ getList:function(name){ return this.arr[name] } } }) </script> ``` 像这样,只要整个test发生变化就会调用getList方法,就比如我在input输入也会调用getList,各位大神有解决方法吗
vue的vuescroll插件苹果手机滑动不了,安卓手机没有问题
大佬们救助啊!!! ```<template> <div style="margin-top:-80px;"> <div class="page__hd"> <div class="weui-form-preview__ft"> <label class="weui-form-preview__btn weui-form-preview__btn_default"> <span @click="toIndex" style="color:rgb(0, 0, 0);">&lt;返回</span> </label> <label type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:" style="color:rgb(0, 0, 0);" >{{this.zqName}}合同</label> <label type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" style="color:rgb(0, 0, 0);" @click="select" > 筛选 <img src="../assets/000.png" height="20px" width="20px" /> </label> </div> </div> <div class="pr-wrap_tra" style=" overflow-y: scroll;touch-action: pan-y;-webkit-overflow-scrolling: touch;"> <div class="wrap-part_tra first_tra" > <vuescroll ref="vs" :ops="ops" @refresh-start="handleRS" @load-before-deactivate="handleLBD" @refresh-before-deactivate="handleRBD" @load-start="handleLoadStart" > <div v-for="item in ContractList" :key="item.dictid"> <div class="contractList_css_tra"> <div class="list_css_tra" @click="jumppage(item.dictid)"> <span style="float:left;">{{item.farmername}}</span> <span style="float:right;" v-if=" item.isrecord=== 0">糖厂未上报</span> <span style="float:right;" v-if=" item.isrecord=== 1">乡政府退回</span> <span style="float:right;" v-if=" item.isrecord=== 2">县政府退回</span> <span style="float:right;" v-if=" item.isrecord=== 5">糖厂已上报</span> <span style="float:right;" v-if=" item.isrecord=== 6">乡政府已上报</span> <span style="float:right" v-if=" item.isrecord=== 7">县政府已备案</span> <br /> <span style="color:#4169E1;float:left;margin-top: -5px;">({{item.ocnum}})</span> <!-- <p style="float:left; font-size:15px; color:#C0C0C0; margin-top: 5px" >&nbsp;&nbsp;{{item.signdate}}</p> --> <br /> <hr style="width: 100%;" /> <div class="tr_css_tra"> <table class="table_css_tra"> <tr class="title_tra"> <td>种植面积</td> <td>种植产量</td> <td>风险值</td> </tr> <tr class="content_tra"> <td>{{item.area?item.area.toFixed(2):0}} <span style="font-weight:bold;font-size: 13px;">亩</span> </td> <td>{{item.yeild?item.yeild.toFixed(2):0}} <span style="font-weight:bold;font-size: 13px;">吨</span></td> <td v-if=" item.isrecord == 0"> <span style="font-weight:bold;font-size: 13px;">-</span></td> <td v-if=" item.isrecord > 0 && item.matchstate ==0"> <span style="font-weight:bold;font-size: 13px;">计算中</span></td> <td v-if=" item.isrecord > 0 && item.matchstate ==1"> {{item.riskevaluation}} <span style="font-weight:bold;font-size: 13px;">%</span></td> </tr> </table> </div> <hr style="width: 100%;" /> <span style="float:left; margin-top: 10px; ">{{item.departname?item.departname:''}}</span> <span style="float:right; margin-top: 10px;">详情></span> </div> </div> </div> <div id="nodata" style="display:none">{{this.context}}</div> </vuescroll> </div> </div> </div> </template> <script> import vuescroll from "vuescroll"; import farmers from "@/api/farmers"; import indexApi from "@/api/index"; import Vue from "vue"; import axios from "axios"; export default { name: "myvuescroll", props: { // 语言 lang: { default: "zh" // en }, // 距离底部触发自动加载的距离 autoLoadDistance: { default: 10 }, // 是否开启下拉刷新 isRefresh: { default: true }, // 是否开启上拉加载 isPushLoad: { default: true }, // 数据是否全部加载完成 true为全部加载完成 noData: { default: false }, // 下拉刷新开始 refreshStart: { default: () => {} }, // 下拉刷新完成之后 refreshDeactivate: { default: () => {} }, // 上拉开始 loadStart: { default: () => {} }, // 上拉完成之后 loadDeactivate: { default: () => {} } }, components: { vuescroll }, data() { const config = {}; const ops = { vuescroll: { mode: "slide", pullRefresh: { enable: this.isRefresh }, pushLoad: { enable: this.isPushLoad, auto: true, //是否自动触发加载 autoLoadDistance: this.autoLoadDistance } } }; if (this.lang == "zh") { ops.vuescroll.pullRefresh.tips = { deactive: "下拉刷新", active: "释放刷新", start: "刷新中...", beforeDeactive: "刷新成功!" }; ops.vuescroll.pushLoad.tips = { deactive: "上拉加载", active: "释放加载", start: "加载中...", beforeDeactive: "加载成功!" }; } return { ops, config, pageNo: 1, isfirstload: false, end: 0, is: true, ContractList: [], zqName: "", minrisk: 0, maxrisk: 0, farmersName: "", contractCode: "", record: "", data: {}, zqCode: "", departCode: "", xzCode:"", user:{}, sx:true, xl:true, presser:'', context:'', //, maxarea:0, // minarea:0, // isrecord:0, // ocnum:0, // farmername:'' }; }, // created: function() { // this.myInstalHomeFun(); // }, created:function(){ this.user = this.$route.params.user; this.zqCode = this.$route.params.zqCode; this.departCode = this.$route.params.departCode; this.xzCode=this.$route.params.xzCode; this.zqName = this.$route.params.zqName; this.presser = this.$route.params.presser; }, mounted: function() { this.minrisk = this.$route.params.minrisk; this.maxrisk = this.$route.params.maxrisk; this.farmersName = this.$route.params.farmersName; this.contractCode = this.$route.params.contractCode; this.record = this.$route.params.record; this.FarmersContractList(); //需要触发的函数 // alert(this.minrisk) // alert(this.maxrisk) // alert(this.farmersName) // alert(this.contractCode) // alert(this.record) }, methods: { // FarmersContractList() { // let _this = this; // axios({ // url: // "/api/cloudec/fo/order/OrderContractController/GetOrderContractPage", // method: "post", // data: { // pageNo: 1, // pageSize: 10 // this.data=this.$route.query; // // this.maxarea=this.$route.query.maxarea; // // this.minarea=this.$route.query.minarea; // // this.isrecord=this.$route.query.isrecord; // // this.ocnum=this.$route.query.ocnum; // // this.farmername=this.$route.query.farmername; // }, // 刷新开始 // vsInstance vm===this // refreshDom === 刷新dom handleRS(vsInstance, refreshDom, done) { if (this.refreshStart) { this.refreshStart(done); } else { //this.setDone1(done); done(); } }, // 刷新完之后 handleRBD(vm, loadDom, done) { if (this.refreshDeactivate) { this.refreshDeactivate(done); } else { setTimeout(() => { this.setDone1(done); }, 600); } }, // 上拉开始 handleLoadStart(vm, dom, done) { if (this.loadStart) { this.loadStart(done); } else { if (this.isfirstload) { //this.setDone(done); done(); } else { done(); this.isfirstload = true; } } }, // 上拉完成后 handleLBD(vm, loadDom, done) { if (!this.$parent.noData) { if (this.loadDeactivate) { this.loadDeactivate(done); } else { setTimeout(() => { this.setDone(done); //done(); }, 600); } } else { setTimeout(() => { this.setDone(done); //done(); }, 600); } }, // 手动触发 外部通过ref触发 // type load 为加载 refresh 为刷新 trigger(type = "load") { this.$refs["vs"].triggerRefreshOrLoad(type); }, setDone(done) { if(this.sx){ this.pageNo++; this.FarmersContractList(); } done(); }, setDone1(done) { if(this.xl){ this.xl=false; this.ContractList = []; this.is=true; this.pageNo = 1; this.FarmersContractList(); } done(); }, FarmersContractList(done) { let _this = this; if (_this.is) { indexApi.FarmersContractList(this.pageNo,this.maxrisk,this.minrisk,this.record,this.contractCode,this.farmersName,this.departCode, this.zqCode,this.presser,this.xzCode,this.zj) .then(function(response) { // response.data中获取ResponseData实体 // alert(response); if(response.data.pageSize==0){ _this.context="暂无数据"; } for (var i = 0; i < response.data.page.dataList.length; i++) { _this.sx=false; _this.xl=false; _this.ContractList.push(response.data.page.dataList[i]); } _this.sx=true; _this.xl=true; if (response.data.page.totalPage == _this.pageNo) { _this.is = false; _this.context="暂无更多数据"; } //_this.ContractList = response.data.page.dataList; }) .catch(function(error) { // 发生错误 }); } else { //document.getElementById("nodata").style.display = "block"; } }, select() { this.$router.replace({ name: "select", params: { user: this.user, departCode:this.departCode, zqCode:this.zqCode, xzCode:this.xzCode, zqName:this.zqName, presser:this.presser } }); }, jumppage(val) { this.$router.replace({name: "contractInfo", params: { user: this.user,dictid: val, departCode:this.departCode, zqCode:this.zqCode, xzCode:this.xzCode, zqName:this.zqName, presser:this.presser}}); }, toIndex(){ this.$router.replace({name: "index"+this.user.wxUserInfo.userType, params: { user: this.user}}); } } }; </script> <style> .pr-wrap_tra { display: flex; height: calc(93vh); justify-content: center; width: 100%; } .pr-wrap_tra .wrap-part_tra { height: 100%; width: 100%; } .pr-wrap_tra .wrap-part_tra .first_tra { width: 100%; width: 100%; } .contractList_css_tra { position: relative; margin: 0 auto; width: 90%; height: 170px; background-color: #ffffff; border-radius: 5px; padding: 10px 10px 10px 10px; box-shadow: 5px 5px 10px 2px#DCDCDC; margin-bottom: 20px; } .tr_css_tra { margin: 10px 10px 10px 10px; /* border: 1px solid red; */ } /* .table_tra { width: 100%; text-align: center; margin-top: 50px; position: relative; margin: 0 auto; } */ .content_tra { color: #045ce4; } .table_css_tra{ width: 100%; text-align: center; margin-top: 50px; position: relative; margin: 0 auto; } </style> ```
如何解决vue和iview组件库结合适合时在某些情况下的内存泄漏问题
demo如下 ``` <Button @click="toggle=!toggle">切换显示</Button> <div v-if="toggle"> //这个select是iview提供的组件,非原生select <Select> <Option :lable=“’apple‘” :value="apple"> <Option :lable=“’orange‘” :value="orange"> </Select> </div> ``` 上述代码片段,在多次点击button进行显示隐藏的切换后,页面内存急速升高,不会回落导致浏览器卡死崩溃。 vue官网解释这种情况下需要手动去destory这个组件,翻了下iview文档没有相关的destory方法,有大佬遇到过这样的情况,该怎么解决呢。 补充一下,单纯用上面的demo去试,可能内存升高的不是那么快那么明显,但是页面这样的节点特别多的时候就很明显了。
vue 修改的时候报undefind错误
<template> <el-container v-loading="loadingData" style="height: 100%" class="app-container calendar-list-container"> <el-header height="62px" class="filter-container"> <el-row> <el-col :span="21"> <el-form :inline="true" :model="formSearch" class="demo-form-inline"> <el-form-item> <el-input v-model="formSearch.value" placeholder="请输入水道名称" clearable></el-input> </el-form-item> <el-form-item> <el-select v-model="formSearch.type" filterable clearable placeholder="请选择水道类型"> <el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item> <el-select v-model="formSearch.official" placeholder="请选择水道性质" filterable clearable> <el-option key="true" label="正式水道" value="true"></el-option> <el-option key="false" label="测试水道" value="false"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="loadMain" size="small" icon="el-icon-search" round>搜索</el-button> </el-form-item> </el-form> </el-col> <el-col :span="3" style="text-align: right"> <el-button @click="handleAdd" v-show="visibleBtnAdd" type="success" size="small" icon="el-icon-plus" round>新增水道</el-button> </el-col> </el-row> </el-header> <el-main ref="layoutMain" class="table-container"> <el-table :data="dataMain" :height="heightMain" stripe highlight-current-row class="el-table-border"> <el-table-column prop="name" label="水道名称"></el-table-column> <el-table-column prop="swzName" label="水位站"></el-table-column> <el-table-column prop="typeName" label="水道类型" width="100"></el-table-column> <el-table-column prop="isOfficial" label="水道性质" align="center" width="100" :formatter="formatOfficial"></el-table-column> <el-table-column prop="startName" label="水道起点" width="100"></el-table-column> <el-table-column prop="endName" label="水道讫点" width="100"></el-table-column> <el-table-column label="里程" width="100"> <template slot-scope="scope">{{ Math.abs(scope.row.endMileage - scope.row.startMileage) + '公里' }}</template> </el-table-column> <el-table-column prop="remark" label="水道概况" width="200"></el-table-column> <el-table-column label="操作" align="center" fixed="right" width="150"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row)" v-show="visibleBtnEdit" type="primary" size="mini" round plain>编辑</el-button> <el-button @click="handleDelete(scope.row)" v-show="visibleBtnDelete" type="danger" size="mini" round plain>删除</el-button> </template> </el-table-column> </el-table> </el-main> <el-footer> <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" :current-page="dataPage" :page-sizes="[10, 20, 50, 100]" :page-size="dataSize" :total="dataTotal" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </el-footer> <el-dialog :title="dataRecordTitle[actionDialogRecord]" :visible.sync="visibleDialogRecord" :close-on-click-modal="false" :before-close="handleClose" > <el-form class="large-space" ref="formRecord" :model="formRecord" :rules="ruleRecord" label-position="left" label-width="90px"> <el-row :gutter="24"> <el-col :span="4"><strong>图片信息</strong></el-col> <el-col :span="20"> <el-upload :action="imageUpload" :headers="headers" :with-credentials="true" list-type="picture-card" :file-list="formRecord.waterInfomationPicDTO" :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" style="float: left; margin-bottom: 10px"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible" size="tiny"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-col> </el-row> <el-form-item label="水道名称" prop="name"> <el-input v-model="formRecord.name"></el-input> </el-form-item> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水道类型" prop="type"> <el-select v-model="formRecord.type" filterable placeholder="请选择水道类型" style="width: 100%"> <el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </el-form-item></el-col> <el-col :span="12"><el-form-item label="水道性质" prop="official"> <el-switch v-model="formRecord.official" :disabled.sync="disabledSelOfficial" active-text="正式水道" inactive-text="测试水道" ></el-switch> </el-form-item></el-col> </el-row> <!-- <el-form-item label="位置" prop="waterway"> <map-box v-loading="loadingWaterway" @mapReady="handleMapReady" class="map-box"></map-box> </el-form-item> --> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水道起点" prop="start"> <el-select ref="selStart" v-model="formRecord.start" filterable placeholder="请选择水道起点" style="width: 100%"> <el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item></el-col> <el-col :span="12"><el-form-item label="水道讫点" prop="end"> <el-select ref="selEnd" v-model="formRecord.end" filterable placeholder="请选择水道讫点" style="width: 100%"> <el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item></el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水位站" prop="swzId"> <el-select ref="selStation" v-model="formRecord.swzId" filterable placeholder="请选择关联水位站" style="width: 100%"> <el-option v-for="item in dataWaterStation" :key="item[0]" :label="item[1]" :value="item[0]"> </el-option> </el-select> </el-form-item></el-col> </el-row> <el-form-item label="水道概况" prop="remark"> <el-input type="textarea" v-model="formRecord.remark"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取消</el-button> <el-button @click="handleSave" type="primary">保存</el-button> </div> </el-dialog> </el-container> </template> <style rel="stylesheet/scss" lang="scss" scoped> .map-box { height: 200px; overflow: auto; border: 1px solid #ebeef5; } </style> <script> import $ from 'jquery' import waves from '@/directive/waves/index.js' import MapBox from '@/components/mapBox.vue' import { addGraphicsLayer, RAddListGraphic, RegClick } from '@/filters/RMapUitl.js' import { queryWaterwayList, queryWaterwayPointList, waterInfomationList } from '@/api/base/waterway' import { debounce, getTableHeight } from '@/utils' import { queryNodeList } from '@/api/base/node' import { queryChannelTypeList, queryChannelFullList, queryChannelAdd, queryChannelEdit, queryChannelDelete } from '@/api/base/channel' import { fetchSelectData, getCoordinate, addWaterStation, getWaterStation, updateWaterStation, getUpload, deletePicByid, fetchCjjmDetail } from '@/api/water/waterStation.js' import {getToken} from '@/utils/auth' // 验权 export default { name: 'channel_page', directives: { waves }, components: { MapBox }, data() { return { visibleBtnAdd: true, visibleBtnEdit: true, visibleBtnDelete: true, formSearch: { type: undefined, value: '', official: undefined }, formRecord: { id: null, name: '', type: null, official: false, waterway: null, startId: null, endId: null, start: null, end: null, swzId: null, remark: '', waterInfomationPicDTO: [] }, imageUpload: getUpload(), headers: {'X-Token': getToken()}, heightMain: getTableHeight(10), dataWaterway: [], dataWaterStation: [], dataType: [], dataNode: [], dataMain: [], dataTotal: 0, dataPage: 1, dataSize: 10, loadingData: false, loadingWaterway: false, visibleDialogRecord: false, disabledSelOfficial: false, actionDialogRecord: '', fullscreenLoading: false, dialogVisible: false, dialogImageUrl: '' } }, computed: { ruleRecord: () => { return { name: [ { required: true, message: '请输入水道名称', trigger: 'blur' }, { max: 30, message: '长度不得超过30个字符', trigger: 'blur' } ], type: [ { required: true, message: '请选择水道类型', trigger: 'blur' } ], waterway: [ { required: true, message: '请选择水道位置', trigger: 'blur' } ], start: [ { required: true, message: '请选择水道起点', trigger: 'blur' } ], end: [ { required: true, message: '请选择水道讫点', trigger: 'blur' } ], swzId: [ { required: true, message: '请选择水位站', trigger: 'blur' } ], remark: [ { max: 100, message: '长度不得超过100个字符', trigger: 'blur' } ] } }, dataRecordTitle: () => { return { add: '新增水道', edit: '编辑水道' } } }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHanlder) }, mounted() { this.__resizeHanlder = debounce(() => { this.heightMain = getTableHeight(10) }, 100) window.addEventListener('resize', this.__resizeHanlder) this.loadMain() queryChannelTypeList(null, result => { this.dataType = result }) this.dataWaterway = [] queryWaterwayList(null, result => { if (result) { for (const i in result) { const record = result[i] queryWaterwayPointList({ 'waterway': record.id }, ((me, polyline) => { return result => { if (result) { for (const i in result) { const record = result[i] if (polyline.geometry.length > 0) { polyline.geometry += '#' } polyline.geometry += record.long + ',' + record.lat } } me.dataWaterway.push(polyline) } })(this, { 'id': record.id, 'xtype': 'polyline', 'style': { 'stype': 'lineSymbol' }, 'geometry': '' })) } } }), // 新建水道->水位站选项数据获取 waterInfomationList(null, result => { if (result) { this.dataWaterStation = result } }) }, methods: { // 上传照片之前判断是否符合格式要求 beforeAvatarUpload(file) { // 照片格式 const picArr = ['image/jpeg', 'image/JPEG', 'image/png', 'image/PNG'] // 照片大小 const isLt2M = file.size / 1024 / 1024 < 2 // 一次上传照片数量 const maxLength = this.formRecord.waterInfomationPicDTO.length < 5 if (picArr.indexOf(file.type) < 0) { this.$message.error('上传图片只能是 JPG 或者 PNG 格式!') return false } if (!maxLength) { this.$message.error('图片最多只能上传五张!') return false } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return false } this.imgLoading = true }, // 上传照片成功 handleAvatarSuccess(res) { if (res.status) { const urlObj = {} urlObj.url = res.imageUrl this.formRecord.waterInfomationPicDTO.push(urlObj) this.imgLoading = false } }, // 删除照片 handleRemove(file, fileList) { deletePicByid(file.id).then(() => { }) this.formRecord.waterInfomationPicDTO = fileList }, // 放大图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible = true }, beforeClose() { this.$refs.formRecord.resetFields() this.actionDialogRecord = '' this.disabledSelOfficial = false this.formRecord.id = null this.formRecord.name = '' this.formRecord.type = null this.formRecord.official = false this.formRecord.waterway = null this.formRecord.startId = null this.formRecord.endId = null this.formRecord.swzId = null this.formRecord.remark = '' }, resetSearch() { this.formSearch.type = undefined this.formSearch.value = '' this.formSearch.official = undefined this.dataPage = 1 }, loadNode() { debugger const param = {} if (this.formRecord.waterway !== null) { param.waterway = this.formRecord.waterway } queryNodeList(param, result => { this.dataNode = result }, null, () => { if (this.formRecord.start) { this.formRecord.startId = this.formRecord.start } if (this.formRecord.end) { this.formRecord.endId = this.formRecord.end } this.formRecord.start = null this.formRecord.end = null for (const i in this.dataNode) { const node = this.dataNode[i] if (this.formRecord.startId && node.id === this.formRecord.startId) { this.formRecord.start = node.id } if (this.formRecord.endId && node.id === this.formRecord.endId) { this.formRecord.end = node.id } } }) }, loadMain() { this.loadingData = true const param = {} if (this.formSearch.type) { param.type = this.formSearch.type } if (this.formSearch.value) { param.value = this.formSearch.value } if (this.formSearch.official) { param.isOfficial = this.formSearch.official } queryChannelFullList(param, this.dataPage, this.dataSize, (data, total) => { if (data) { this.dataMain = data } else { this.dataMain = [] } if (total) { this.dataTotal = total } else { this.dataTotal = this.dataMain.length } }, null, () => { this.loadingData = false }) }, formatOfficial(row, column) { const value = row[column.property] if (value === undefined || value === null) { return '' } else { if (value === true || value === 'true' || value === '1') { return '正式水道' } else { return '测试水道' } } }, handleMapReady() { this.loadingWaterway = true addGraphicsLayer({ 'type': 'GraphicsLayer', 'layerid': 'WaterwayLayer' }, (me => { return layer => { RAddListGraphic(layer, me.dataWaterway) RegClick(layer, me.handleMapLineClick) } })(this)) this.loadingWaterway = false }, handleMapLineClick(evt) { this.formRecord.waterway = evt.graphic.attributes.id this.loadNode() }, handleAdd() { this.loadNode() this.actionDialogRecord = 'add' this.visibleDialogRecord = true }, handleEdit(r) { this.disabledSelOfficial = true this.formRecord.id = r.id this.formRecord.name = r.name this.formRecord.type = r.typeId this.formRecord.official = r.isOfficial //this.formRecord.waterway = r.waterwayId this.formRecord.startId = r.startId this.formRecord.endId = r.endId this.formRecord.remark = r.remark this.loadNode() this.actionDialogRecord = 'edit' this.visibleDialogRecord = true }, handleDelete(r) { this.$confirm('确认删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.fullscreenLoading = true queryChannelDelete({ 'id': r.id }, () => { this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) }, null, () => { this.fullscreenLoading = false }) }) }, handlePageSizeChange(v) { this.dataSize = v this.loadMain() }, handlePageCurrentChange(v) { this.dataPage = v this.loadMain() }, handleSave() { this.$refs.formRecord.validate((valid) => { if (valid) { const param = { 'name': this.formRecord.name, 'type': this.formRecord.type, 'waterway': this.formRecord.waterway, 'start': this.formRecord.start, 'end': this.formRecord.end, 'swzId': this.formRecord.swzId, 'sdzp': this.formRecord.waterInfomationPicDTO } if (this.formRecord.remark) { param['remark'] = this.formRecord.remark } const done = () => { this.handleCancel() this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) } const always = () => { this.fullscreenLoading = false } this.fullscreenLoading = true switch (this.actionDialogRecord) { case 'add': param['isOfficial'] = this.formRecord.official queryChannelAdd(param, done, null, always) break case 'edit': param['id'] = this.formRecord.id param['waterway'] = 0 queryChannelEdit(param, done, null, always) break default: always() } } else { return false } }) }, handleCancel() { this.beforeClose() this.visibleDialogRecord = false }, handleClose(done) { this.beforeClose() done() } } } </script>
vue项目,在切换路由时内存没有释放,再次切换回原路由或者是其他页面,为什么内存又被释放了?
先说一下环境:vue:2.5.2 vue-router:3.0.1 element-ui:2.13.0 最开始存在三个页面HelloWorld、foo和bar。 分别说一下这两个页面都有什么: HelloWorld页面,有一个请求(会请求一些数据),将请求回来的数据放到data中,并用element-ui的select组件进行展示,另外就是一个跳转至foo页面的按钮,代码如下: ``` <template> <div class="hello"> <el-button @click="getAccountListPage"> page获取科目列表 </el-button> <el-select v-model="activeAcc" placeholder="请选择"> <el-option v-for="item in accountPageList" :key="item.id" :label="item.codeAndName" :value="item.id"> </el-option> </el-select> <el-button @click="goToFoo"> go Foo </el-button> </div> </template> <script> export default { name: 'HelloWorld', data () { return { activeAcc: '', accountPageList: [] } }, methods: { getAccountListPage() { let xmlhttp, that = this; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { let res = JSON.parse(xmlhttp.response); if(res.result) { that.accountPageList = res.value; } } }; xmlhttp.open("POST","******这里是url*******",true); xmlhttp.setRequestHeader("Content-type","application/json"); xmlhttp.send('{}'); }, goToFoo() { this.$router.push({name: 'foo'}) } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` foo页面,很简单,有一个跳转至HelloWorld页面的按钮和一个跳转至bar页面的按钮,代码如下: ``` <template> <div class="foo"> 这是Foo页面 <el-button @click="goToHelloWorld"> go HelloWorld </el-button> <el-button @click="goToBar"> go Bar </el-button> </div> </template> <script> export default { name: 'Foo', data () { return {} }, computed: {}, methods: { goToHelloWorld() { this.$router.push({name: 'HelloWorld'}) }, goToBar() { this.$router.push({name: 'bar'}) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` bar页面和foo页面一样,有一个跳转至HelloWorld页面的按钮和一个跳转至foo页面的按钮,代码如下: ``` <template> <div class="bar"> 这是Bar页面 <el-button @click="goToHelloWorld"> go HelloWorld </el-button> <el-button @click="goToFoo"> go Foo </el-button> </div> </template> <script> export default { name: 'Bar', data () { return { } }, computed: {}, methods: { goToHelloWorld() { this.$router.push({name: 'HelloWorld'}) }, goToFoo() { this.$router.push({name: 'foo'}) } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` 操作步骤: 1.进入HelloWord页面,不做任何操作,利用chrome浏览器开发者工具中的Performance monitor工具,查看内存使用情况 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778311_366832.png) 2.点击按钮获取数据,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778454_982794.png) 可以看到,js、dom nodes、 js event,都有所增加。 3.跳转至foo页面,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778614_138117.png) 这时候发现内存占用情况并没有明显变化,也就是说跳转foo页面后,helloword页面的内存并未得到释放。这是问题一。 4.这时候跳转至bar页面,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778782_257327.png) 可以看到,刚刚存在的内存占用已经被释放了。这是问题二。 上面的截图都是我手动垃圾回收(collect garbage)后的截图。 对于上面出现的两个问题,还请各位大佬解答一下,万分感谢!!!
vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。求助前端大神。
## # ## #vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。 网上百度的给下拉框加z-index和设置position:absolute都不好使,求助前端大神。 ``` <template> <!--添加数据 - 单次引入--> <div> <!--在这里指定目标列和tagging列 表单--> <div style="width: 90%; margin-left: 50px; margin-top: 10px; background-color: white;overflow: hidden;"> <Form :model="formItem" ref="formValidate" :rules="ruleValidate" :label-width="200" style="width: 70%;margin-top: 30px;"> <FormItem label="命名空间" prop="nameSpace"> <Select v-model="formItem.nameSpace" placeholder="输入命名空间,支持英文字母、数字、下划线和加减号"> <Option v-for="(item, index) in formItem.nameSpace" :key="index" :value="item.value"> <span>{{item.name}}</span> </Option> </Select> </FormItem> <FormItem label="导入数据组" prop="dataGroup"> <RadioGroup v-model="formItem.dataGroup"> <Radio label="not">不导入数据组</Radio> <Radio label="female">导入已有数据组</Radio> <Radio label="male">创建新数据组</Radio> </RadioGroup> </FormItem> <FormItem label="数据表名" prop="dataTableName"> <Input v-model="formItem.dataTableName" placeholder="输入数据表名,支持英文字母、数字、下划线和加减号"></Input> </FormItem> <FormItem label="类型异常行" prop="excepRow"> <RadioGroup v-model="formItem.excepRow"> <Radio label="not">设置为null</Radio> <Radio label="female">抛掉异常行</Radio> <Radio label="male">放弃本次引入</Radio> </RadioGroup> </FormItem> <FormItem label="与标准列数不一致" prop="excepCol"> <RadioGroup v-model="formItem.excepCol"> <Radio label="female">抛掉异常行</Radio> <Radio label="male">放弃本次引入</Radio> </RadioGroup> </FormItem> <FormItem label="高级参数" prop="seniorParam"> <RadioGroup v-model="formItem.seniorParam"> <Radio label="not">使用默认配置</Radio> <Radio label="female">自定义高级参数</Radio> </RadioGroup> </FormItem> </Form> </div> <!--编辑字段名、类型表格--> <div style="width: 90%; margin: 10px 0 0 50px; background-color: white;overflow: hidden;" align="center"> <Row style="width: 90%;"> <Col span="10"> <h2 align="left" style="margin: 20px 0 20px 0;">编辑字段</h2> </Col> <Col span="14"> <h2 align="right" style="margin: 20px 0 20px 0;">点击字段名或字段类型进入批量编辑模式</h2> </Col> </Row> <div style="width: 90%;"> <Table :columns="dataPreviewColumns" :data="dataPreviewData"></Table> <!--分页--> <div style="margin: 10px;overflow: hidden"> <div style="float: left;"> <Page :total="dataPreviewData.length" :current="1" prev-text="上一页" next-text="下一页" show-total show-sizer show-elevator></Page> </div> </div> </div> <Button @click="importData" type="primary" size="large" style="float: right;margin: 0 100px 30px 0;width: 150px;">下一步</Button> </div> </div> </template> <script> /* eslint-disable */ export default { name: 'once-import-next', data () { return { columnName: ['String', 'SmallInt', 'Int', 'BigInt', 'Float', 'Double', 'Date', 'TimeStamp'], formItem: { // 表单项集合 nameSpace: [{name:'data_test', value:'data_test'}], dataGroup: '', dataTableName: '', excepRow: '', excepCol: '', seniorParam: '' }, ruleValidate: { // 表单字段校验规则 nameSpace: [ { required: true, message: '请选择命名空间', trigger: 'change' } ], dataGroup: [ { required: true, message: '请选择数据组', trigger: 'change' } ], dataTableName: [ { required: true, message: '请输入数据表名', trigger: 'blur' } ] }, dataPreviewColumns: [ {type: 'selection', width: 100, align: 'center'}, {title: '字段名', key: 'nameSpace'}, { title: '字段类型', key: 'name', render: (h, params) => { return h('Select',{style: {width: '100px'}, attrs: {placeholder: params.row.name}}, this.columnName.map((column) => { return h('Option', {attrs: {value: column}}, [h('span',[column])]); }) ); } }, { title: '引入类型', key: 'type' }, { title: '引入完整性', key: 'integrity' }, { title: '占用存储', key: 'storage' }, { title: '创建时间', key: 'createTime', sortable: true}, { title: '修改时间', key: 'editTime', sortable: true} ], dataPreviewData: [ { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 12, editTime: 12 }, { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 11, editTime: 2 }, { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 1, editTime: 222 }, { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 22, editTime: 12 } ] } }, methods: { importData(){ this.$emit('importStatus', true); const id = parseInt(Math.random() * 100000) const route = { name: 'import-status', params: { id }, meta: { title: `动态路由-${id}` } } this.$router.push(route) } }, mounted(){ } } </script> <style > .ivu-select-dropdown{ z-index: 99999; position: relative; } </style> ![图片说明](https://img-ask.csdn.net/upload/201909/02/1567420031_279292.png) ![图片说明](https://img-ask.csdn.net/upload/201909/02/1567420041_157300.png) ```
vue工程中$emit()无法调用
子组件代码 ``` <template> <div> <!--查询表单--> <el-form :model="params"> 标签: <el-input v-model="params.tag" style="width:160px"></el-input> 原始名称: <el-input v-model="params.fileName" style="width:160px"></el-input> 处理状态: <el-select v-model="params.processStatus" placeholder="请选择处理状态"> <el-option v-for="item in processStatusList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> <br/> <el-button type="primary" v-on:click="query" size="small">查询</el-button> <router-link class="mui-tab-item" :to="{path:'/upload'}"> <el-button type="primary" size="small" v-if="ischoose != true">上传文件</el-button> </router-link> </el-form> <!--列表--> <el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column type="index" width="30"> </el-table-column> <el-table-column prop="fileOriginalName" label="原始文件名称" width="220"> </el-table-column> <el-table-column prop="fileName" label="文件名称" width="220"> </el-table-column> <el-table-column prop="fileUrl" label="访问url" width="260"> </el-table-column> <el-table-column prop="tag" label="标签" width="100"> </el-table-column> <el-table-column prop="fileSize" label="文件大小" width="120"> </el-table-column> <el-table-column prop="processStatus" label="处理状态" width="100" :formatter="formatProcessStatus"> </el-table-column> <el-table-column prop="uploadTime" label="创建时间" width="110" :formatter="formatCreatetime"> </el-table-column> <el-table-column label="开始处理" width="100" v-if="ischoose == true"> <template slot-scope="scope"> <el-button size="small" type="primary" plain @click="process(scope.row.fileId)">开始处理 </el-button> </template> </el-table-column> <el-table-column label="选择" width="80" v-if="ischoose != true"> <template slot-scope="scope"> <el-button size="small" type="primary" plain @click="choose(scope.row)">选择</el-button> </template> </el-table-column> </el-table> <!--分页--> <el-col :span="24" class="toolbar"> <el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="this.params.size" :total="total" :current-page="this.params.page" style="float:right;"> </el-pagination> </el-col> </div> </template> <script> import * as mediaApi from '../api/media' import utilApi from '@/common/utils'; import * as courseApi from '../api/course' export default{ props: ['ischoose'], data(){ return { params:{ page:1,//页码 size:10,//每页显示个数 tag:'',//标签 fileName:'',//文件名称 processStatus:''//处理状态 }, listLoading:false, list:[], total:0, processStatusList:[] } }, methods:{ formatCreatetime(row, column){ var createTime = new Date(row.uploadTime); if (createTime) { return utilApi.formatDate(createTime, 'yyyy-MM-dd hh:mm:ss'); } }, formatProcessStatus(row,column){ var processStatus = row.processStatus; if (processStatus) { if(processStatus == '303001'){ return "处理中"; }else if(processStatus == '303002'){ return "处理成功"; }else if(processStatus == '303003'){ return "处理失败"; }else if(processStatus == '303004'){ return "无需处理"; } } }, choose(mediaFile){ if(mediaFile.processStatus !='303002' && mediaFile.processStatus !='303004'){ this.$message.error('该文件未处理,不允许选择'); return ; } if(!mediaFile.fileUrl){ this.$message.error('该文件的访问url为空,不允许选择'); return ; } /*let teachplanMedia ={} teachplanMedia.mediaId =mediaFile.fileId; teachplanMedia.mediaFileOriginalName =mediaFile.fileOriginalName; teachplanMedia.mediaUrl =mediaFile.fileUrl; teachplanMedia.courseId =this.courseid; //课程计划 teachplanMedia.teachplanId=this.teachplanId courseApi.savemedia(teachplanMedia).then(res=>{ if(res.success){ this.$message.success("选择视频成功") //查询课程计划 this.findTeachplan() }else{ this.$message.error(res.message) } })*/ //调用父组件的choosemedia方法 this.$emit('choosemedia',mediaFile.fileId,mediaFile.fileOriginalName,mediaFile.fileUrl); }, changePage(page){ this.params.page = page; this.query() }, process (id) { console.log(id) mediaApi.media_process(id).then((res)=>{ console.log(res) if(res.success){ this.$message.success('开始处理,请稍后查看处理结果'); }else{ this.$message.error('操作失败,请刷新页面重试'); } }) }, query(){ mediaApi.media_list(this.params.page,this.params.size,this.params).then((res)=>{ console.log(res) this.total = res.queryResult.total this.list = res.queryResult.list }) } }, created(){ //默认第一页 this.params.page = Number.parseInt(this.$route.query.page||1); }, mounted() { //默认查询页面 this.query() //初始化处理状态 this.processStatusList = [ { id:'', name:'全部' }, { id:'303001', name:'处理中' }, { id:'303002', name:'处理成功' }, { id:'303003', name:'处理失败' }, { id:'303004', name:'无需处理' } ] } } </script> <style> </style> ``` 父组件代码 ``` <template> <div> <el-button type="primary" @click="teachplayFormVisible = true">添加课程计划</el-button> <el-tree :data="teachplanList" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> <el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible" > <el-form ref="teachplanForm" :model="teachplanActive" label-width="140px" style="width:600px;" :rules="teachplanRules" > <el-form-item label="上级结点" > <el-select v-model="teachplanActive.parentid" placeholder="不填表示根结点"> <el-option v-for="item in teachplanList" :key="item.id" :label="item.pname" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="章节/课时名称" prop="pname"> <el-input v-model="teachplanActive.pname" auto-complete="off"></el-input> </el-form-item> <el-form-item label="课程类型" > <el-radio-group v-model="teachplanActive.ptype"> <el-radio class="radio" label='1'>视频</el-radio> <el-radio class="radio" label='2'>文档</el-radio> </el-radio-group> </el-form-item> <el-form-item label="学习时长(分钟) 请输入数字" > <el-input type="number" v-model="teachplanActive.timelength" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="排序字段" > <el-input v-model="teachplanActive.orderby" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="章节/课时介绍" prop="description"> <el-input type="textarea" v-model="teachplanActive.description" ></el-input> </el-form-item> <el-form-item label="状态" prop="status"> <el-radio-group v-model="teachplanActive.status" > <el-radio class="radio" label="0" >未发布</el-radio> <el-radio class="radio" label='1'>已发布</el-radio> </el-radio-group> </el-form-item> <el-form-item > <el-button type="primary" v-on:click="addTeachplan">提交</el-button> <el-button type="primary" v-on:click="resetForm">重置</el-button> </el-form-item> </el-form> </el-dialog> <el-dialog title="选择媒资文件" :visible.sync="mediaFormVisible"> <media-list v-bind:ischoose="true" @choosemedia="choosemedia"></media-list> </el-dialog> </div> </template> <script> let id = 1000; import * as courseApi from '../../api/course'; import utilApi from '../../../../common/utils'; import * as systemApi from '../../../../base/api/system'; import mediaList from '@/module/media/page/media_list.vue'; export default { components:{ mediaList }, data() { return { mediaFormVisible:false, teachplayFormVisible:false,//控制添加窗口是否显示 teachplanList : [{ id: 1, pname: '一级 1', children: [{ id: 4, pname: '二级 1-1', children: [{ id: 9, pname: '三级 1-1-1' }, { id: 10, pname: '三级 1-1-2' }] }] }], defaultProps:{ children: 'children', label: 'pname' }, teachplanRules: { pname: [ {required: true, message: '请输入课程计划名称', trigger: 'blur'} ], status: [ {required: true, message: '请选择状态', trigger: 'blur'} ] }, teachplanActive:{}, teachplanId:'' } }, methods: { //选择视频,打开窗口 choosevideo(data){ //得到当前的课程计划 this.teachplanId = data.id // alert(this.teachplanId) this.mediaFormVisible = true;//打开窗口 }, //保存选择的视频 choosemedia(mediaId, fileOriginalName, mediaUrl){ alert(111) //保存视频到课程计划表中 let teachplanMedia ={} teachplanMedia.mediaId =mediaId; teachplanMedia.mediaFileOriginalName =fileOriginalName; teachplanMedia.mediaUrl =mediaUrl; teachplanMedia.courseId =this.courseid; //课程计划 teachplanMedia.teachplanId=this.teachplanId courseApi.savemedia(teachplanMedia).then(res=>{ if(res.success){ this.$message.success("选择视频成功") //查询课程计划 this.findTeachplan() }else{ this.$message.error(res.message) } }) }, //提交课程计划 addTeachplan(){ //校验表单 this.$refs.teachplanForm.validate((valid) => { if (valid) { //调用api方法 //将课程id设置到teachplanActive this.teachplanActive.courseid = this.courseid courseApi.addTeachplan(this.teachplanActive).then(res=>{ if(res.success){ this.$message.success("添加成功") //刷新树 this.findTeachplan() }else{ this.$message.error(res.message) } }) } }) }, //重置表单 resetForm(){ this.teachplanActive = {} }, append(data) { const newChild = { id: id++, label: 'testtest', children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); }, edit(data){ //alert(data.id); }, remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); }, renderContent(h, { node, data, store }) { return ( <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"> <span> <span>{node.label}</span> </span> <span> <el-button style="font-size: 12px;" type="text" on-click={ () => this.choosevideo(data) }>{data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(data) }>修改</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button> </span> </span>); }, findTeachplan(){ this.teachplanList = [] //查询课程计划 courseApi.findTeachplanList(this.courseid).then(res=>{ if(res && res.children){ this.teachplanList = res.children; } }) } }, mounted(){ //课程id this.courseid = this.$route.params.courseid; //查询课程计划 this.findTeachplan() } } </script> <style> </style> ``` 在子组件想用这个方法调用父组件中方法,但无法调用,控制台上也没提示.后来发现,在webstorm中按着Ctrl键追踪不到.鼠标放上去提示Unresolved function or method $emit()
利用Props将表单中写的数据传入到一个组件中的数组中,点击提交没有反应,在线等,求救救孩子。
求大佬们帮忙看看,是哪儿出问题了 ``` <template> <div> <el-form ref="form" :model="form" label-width="80px" class="form-item-require-lable"> <el-form-item label="任务类型"> <el-select v-model="form.kind" placeholder="请选择您要新建的任务类型"> <el-option label="学习任务" value="xuexi"></el-option> <el-option label="工作任务" value="gongzuo"></el-option> <el-option label="生活任务" value="shenghuo"></el-option> </el-select> </el-form-item> <el-form-item label="任务主题"> <el-input type="textarea" v-model="form.name"></el-input> </el-form-item> <el-form-item label="任务时间"> <el-col :span="11"> <el-date-picker type="datetime" placeholder="选择任务开始日期时间" v-model="form.beginTime" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-date-picker type="datetime" placeholder="选择任务结束日期时间" v-model="form.endTime" style="width: 100%;"></el-date-picker> </el-col> </el-form-item> <el-form-item label="任务内容"> <el-input type="textarea" v-model="form.content"></el-input> </el-form-item> <el-form-item label="任务标记"> <el-radio-group v-model="form.biaoji"> <el-radio label="重要任务" name="type"></el-radio> <el-radio label="普通任务" name="type"></el-radio> </el-radio-group> </el-form-item> <el-form-item > <el-button type="primary" @click="resetForm(form)">取消</el-button> <el-button type="success" @onclick="submitForm(form)">提交</el-button> </el-form-item> </el-form> <el-dialog> </el-dialog> </div> </template> <script> import Sousuo from './Sousuo.vue' export default { name: 'Xinjian', components:{Sousuo}, props: ['value'], //xinjian_value data() { return { form: { //form要与前面的定义一样 kind: '', name: '', beginTime: '', endTime: '', content: '', biaoji: '', } } }, methods: { SubmitForm(form) { /*this.$api.SubmitForm(data =>{ window.location.reload(); },*/ //this.props.close(); this.xinjian0=false; var data={ kind:form.kind, name:form.name, beginTime:form.beginTime, endTime:form.endTime, content:form.content, biaoji:form.biaoji, } this.tableData.push(data) this.$emit('update',tableData); console.log('submit!'); }, } } </script> <style scoped> .form-item-require-label{ margin: center, } </style> ``` ``` <template> <div> <el-table :data="tabledata" stripe style="width: 100%;"> <el-table-column prop="kind" label="任务类型" width="160" style="height:30px" > </el-table-column> <el-table-column prop="name" label="任务标题" width="160" style="height:30px"> </el-table-column> <el-table-column prop="beginTime" label="起始时间" width="160" style="height:30px"> </el-table-column> <el-table-column prop="endTime" label="结束时间" width="160" style="height:30px"> </el-table-column> <el-table-column prop="content" label="任务内容" width="160" style="height:30px"> </el-table-column> <el-table-column prop="biaoji" label="任务标记" width="160" style="height:30px"> </el-table-column> <el-table-column prop="zhuangtai" label="任务状态" width="160" style="height:30px"> <template slot-scope="scope"> <el-progress :text-inside="false" :stroke-width="8" :percentage="scope.row.percentage" :color="green"> </el-progress> </template> <!--el-progress :percentage="percentage" status="exception"></el-progress--> </el-table-column> <el-table-column label="操作" style="height:30px"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> <el-button @click="handleDelete(scope.$index, tabledata)" size="small">移除 </el-button> <!--el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button><scope.row--> </template> </el-table-column> </el-table> <!--渲染v-for--> <el-dialog title="编辑任务" :visible.sync="bianji0" :append-to-body="true"> <Bianjiform :bianjiformData.sync="tabledata" v-bind="tabledata"></Bianjiform> </el-dialog> <el-dialog title="新建任务" :visible.sync="xinjian0" :append-to-body="true"> <Xinjian :xinjian_value="value"></Xinjian> </el-dialog> </div> </template> <script> import Bianjiform from './Bianjiform.vue' import Xinjian from './Xinjian.vue' export default { components: {Bianjiform,Xinjian}, name: 'Taskform', props:['message'], data() { return { tabledata: [{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 50, }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 2, }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', zhuangtai: '完成', }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 50, },{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 100, },{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 90, }], form: { kind: '', name: '', beginTime: '', endTime: '', content: '', biaoji: '', }, bianji0: false, //xinjian0: false, } }, methods: { handleEdit(index,row){ this.form={ kind:row.kind, name:row.name, beginTime:row.beginTime, endTime:row.endTime, content:row.content, biaoji:row.biaoji, } this.bianji0=true; //this.xinjian0=true; }, handleDelete(index, row) { //console.log(index, row); this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!', }); row.splice(index,1); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, } } </script> <style scoped> </style> ```
需求就是要帮Enum里面的参数传到下拉框,前面做的是以单选按钮形式,现在需要做出的效果就像图二那样的下拉框,但是里面的参数是电压等级,我是新手,前面是大佬做出来叫我改成这样,望你大佬能帮帮忙
![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632653_248555.png) 图一 <div class="layui-form-item"> <div class="layui-col-xs14"> <label class="layui-form-label">电压等级<span style="color:red">*</span> </label> <div class="layui-input-block"> <c:forEach items="${voltageList}" var="v"> <input type="radio" name="voltage" value="${v.id}" title="${v.name}" lay-filter="voltage"> </c:forEach> </div> </div> </div> ``` ``` ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632740_42154.png) 图二 <div class="layui-col-xs4"> <label class="layui-form-label">电厂类型<span style="color:red">*</span> </label> <div class="layui-input-block"> <input type="text" name="dclx" id="dclx" class="layui-input" style="position:absolute;z-index:2;border-right: solid 0px;width: 90%" lay-verify="required" value="" autocomplete="off"> <select lay-filter="filter_fdsbycdclx" id="fdsbycdclx" style="width: 300px; display: none;" class="easyui-combobox combobox-f combo-f" name="dclx"> </select> </div> </div> ``` ``` ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632775_261101.png) Enum代码 ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632840_487922.png)电压jsp代码 ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632921_950209.png)电厂类型代码
iview 左边菜单栏问题?
我点击菜单后会收缩, 点击店铺分类之后就会收缩 ![图片说明](https://img-ask.csdn.net/upload/201912/06/1575612547_524883.png) 点击之后 ![图片说明](https://img-ask.csdn.net/upload/201912/06/1575612562_484044.png) 代码: ``` <template> <div class="slide"> <Menu accordion theme="dark" :active-name="activeName" width="auto" @on-select="changeMenu"> <div v-for="(item, index) in menuList" :key="index"> <MenuItem v-if='item.id == 1' :name="item.name"> <i class="icon" :class="item.iconClass"></i>{{ item.menuName }} </MenuItem> <Submenu v-else :name="item.name"> <template slot="title"> <i class="icon" :class="item.iconClass"></i>{{ item.menuName }} </template> <MenuItem v-for="(item2, index2) in item.children" :key="index2" :name="item2.name">{{ item2.menuName }}</MenuItem> </Submenu> </div> </Menu> </div> </template> <script> import { pagesRouter } from '@/router/index' export default { name: 'slideMenu', data() { return { activeName: "", menuList: [], showMenu: this.menuFlag } }, props: ["menuFlag", "widthFlag"], created() { // 获取缓存中菜单信息 var data = JSON.parse(sessionStorage.getItem("menuData")); this.menuList = data; }, methods: { changeMenu(name){ // 修改菜单显示状态,并传值给 Main 组件 if (!this.widthFlag) { this.showMenu = false; this.$emit("changeMenuFlag", this.showMenu); } localStorage.setItem("menuName",name) this.$router.push({name}); } }, watch: { }, computed: { }, mounted() { this.activeName = this.$route.path;//用name = path; } }; </script> ```
element Form 表单在 el-tab-pane 下<重置/清空>操作时报错怎么解决?
问题描述: 只在el-tab-pane下有这样的提示.如果把代码提到外层就不会报错了?请问这个问题应该怎么解决呢? 错误提示: ![](https://segmentfault.com/img/bVbj5M6?w=777&h=223) 本地代码: <el-tab-pane v-for="item in TabType" :label="item.name" :name="item.id" :key="item.id"> <div v-show="true ? item.id == 1 || item.id == 2 || item.id == 3 : item.id == null"> {{item.name}} </div> <div v-show="true ? item.id == 4 : item.id = null"> <div class="fxn-search"> <el-form :inline="true" :model="SearchForm" :rules="SearchRules" ref="SearchForm"> <el-form-item label="状态" prop="bill_no"> <el-select v-model="SearchForm.status"> <el-option v-for="item in AvoidsStatus" :name="item.name" :key="item.id" :label="item.name" :value="item.name"></el-option> </el-select> </el-form-item> <el-button type="success">查询</el-button> <el-button type="warning" @click="resetForm('SearchForm')">清空</el-button> </el-form> </div> </div> </el-tab-pane> export default { data(){ return{ activeName: '1', //Tab类型 TabType: [ {id: '1',name: 'A栏目'}, {id: '2',name: 'B栏目'}, {id: '3',name: 'C栏目'}, {id: '4',name: 'D栏目'}, ], //申请状态 AvoidsStatus: [ {id: 1,name: '未处理'}, {id: 2,name: '同意'}, {id: 3,name: '拒绝'} ], //筛选 SearchForm: {}, SearchRules: {}, } }, methods:{ //Tab 切换 handleClick(tab, event) { console.log(tab, event); }, //清空筛选条件 resetForm(formName) { this.$refs[formName].resetFields(); } }, mounted(){ } }
多个form表单数据一修改全变了,求解
如图所示: ![图片说明](https://img-ask.csdn.net/upload/201904/01/1554113388_440283.png) ``` <div v-for="(item,index) in items" :key="index"> <el-form :inline="true" :model="formObj" class="demo-form-inline" size="mini" label-position="right" > <el-form-item label="名称1"> <el-select v-model="formObj.name" > <el-option label="A0001" ></el-option> <el-option label="A0002"></el-option> </el-select> </el-form-item> <el-form-item label="名称2"> <el-select v-model="formObj.name2"> <el-option label="0001"></el-option> <el-option label="0002" ></el-option> </el-select> </el-form-item> <el-form-item label="金额"> <el-input v-model="formObj.amount"></el-input> </el-form-item> <el-form-item label="座位"> <el-input v-model="formObj.seat"></el-input> </el-form-item> </el-form> </div> ``` 点击新增按钮,表单新增一行 ``` <el-button @click="add" >新增</el-button> ``` ``` data(){ return { formObj: { bondName: "", etName: "", purchaseAmount: "", seat: "" }, items: [], text: 0 } } ``` ``` methods:{ add: function() { this.items.push(this.text++); } } ``` 但是问题是,修改一行数据,所有的数据都变了,想着可以用作用域插槽,但是不知道怎么添加。。求解
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
本篇文章主要讲解 token、session 等用户认证方案的区别并分析常见误区,以及如何通过前后端的配合实现完善的访问拦截,为下一步权限控制的实现打下基础。
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
漫话:什么是平衡(AVL)树?这应该是把AVL树讲的最好的文章了
这篇文章通过对话的形式,由浅入深带你读懂 AVL 树,看完让你保证理解 AVL 树的各种操作,如果觉得不错,别吝啬你的赞哦。 1、若它的左子树不为空,则左子树上所有的节点值都小于它的根节点值。 2、若它的右子树不为空,则右子树上所有的节点值均大于它的根节点值。 3、它的左右子树也分别可以充当为二叉查找树。 例如: 例如,我现在想要查找数值为14的节点。由于二叉查找树的特性,我们可...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
开源并不是你认为的那些事
点击上方蓝字 关注我们开源之道导读所以 ————想要理清开源是什么?先要厘清开源不是什么,名正言顺是句中国的古代成语,概念本身的理解非常之重要。大部分生物多样性的起源,...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
《C++ Primer》学习笔记(六):C++模块设计——函数
专栏C++学习笔记 《C++ Primer》学习笔记/习题答案 总目录 https://blog.csdn.net/TeFuirnever/article/details/100700212 —————————————————————————————————————————————————————— 《C++ Primer》习题参考答案:第6章 - C++模块设计——函数 文章目录专栏C+...
8年经验面试官详解 Java 面试秘诀
作者 |胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。 Java程序员准备和投递简历的实...
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车?某胡同口的煎饼摊一年能卖出多少个煎饼?深圳有多少个产品经理?一辆公交车里能装下多少个乒乓球?一个正常成年人有多少根头发?这类估算问题,被称为费米问题,是以科学家费米命名的。为什么面试会问这种问题呢?这类问题能把两类人清楚地区分出来。一类是具有文科思维的人,擅长赞叹和模糊想象,它主要依靠的是人的第一反应和直觉,比如小孩...
so easy! 10行代码写个"狗屁不通"文章生成器
前几天,GitHub 有个开源项目特别火,只要输入标题就可以生成一篇长长的文章。 背后实现代码一定很复杂吧,里面一定有很多高深莫测的机器学习等复杂算法 不过,当我看了源代码之后 这程序不到50行 尽管我有多年的Python经验,但我竟然一时也没有看懂 当然啦,原作者也说了,这个代码也是在无聊中诞生的,平时撸码是不写中文变量名的, 中文...
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的回答,对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalking,作者吴晟、刘浩杨 等等 仓库地址: apache/skywalking 更...
MySQL数据库总结
一、数据库简介 数据库(Database,DB)是按照数据结构来组织,存储和管理数据的仓库。 典型特征:数据的结构化、数据间的共享、减少数据的冗余度,数据的独立性。 关系型数据库:使用关系模型把数据组织到数据表(table)中。现实世界可以用数据来描述。 主流的关系型数据库产品:Oracle(Oracle)、DB2(IBM)、SQL Server(MS)、MySQL(Oracle)。 数据表:数...
20行Python代码爬取王者荣耀全英雄皮肤
引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了。我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成。 准备工作 爬取皮肤本身并不难,难点在于分析,我们首先得得到皮肤图片的url地址,话不多说,我们马上来到王者荣耀的官网: 我们点击英雄资料,然后随意地选择一位英雄,接着F12打开调试台,找到英雄原皮肤的图片...
中年危机,35 岁定律,见鬼去吧!
中年危机,35 岁定律,相信你都听说过,每次触及还会让你感到丝丝焦虑,毕竟时间这把杀猪刀不会放过任何一个人。中年危机或 35 岁定律是客观存在的,你迟早都会遭遇的,那你是否有信心战胜它呢? 中年危机之所以让人害怕,一则是你没有把握打赢这场遭遇战,再则中年是一个输不起的阶段。古人云:知己知彼,百战不殆。恐惧,主要源自对敌人和自己的不了解,不知道敌人的优劣势,也不清楚自己的长短板,常常以己之所短攻彼...
张小龙-年薪近3亿的微信之父,他是如何做到的?
张小龙生于湖南邵东魏家桥镇, 家庭主要特点:穷。 不仅自己穷,亲戚也都很穷,可以说穷以类聚。爷爷做过铜匠,总的来说,标准的劳动阶级出身。 家有兄弟两人, 一个小龙,一个小虎。 小虎好动,与邻里打成一片, 小龙好静,喜好读书。 “文静的像个妹子。”张小龙的表哥如是说。 穷文富武,做个读书郎是个不错的选择。 87年至94年, 华中科技大学本硕连读。 本科就读电信系, 不喜欢上课...
阿里靠什么武功秘籍渡过“双十一“的天量冲击
双十一大概会产生多大的数据量呢,可能大家没概念,举个例子央视拍了这么多年电视新闻节目,几十年下来他存了大概80P的数据。而今年双11一天,阿里要处理970P的数据,做为一个IT人,笔者认为今年”双十一“阿里最大的技术看点有有以下两个: 阿里的数据库,也就是刚刚拿下TPC冠军的OcceanBase,处理峰值也达到了骇人听闻的6100万次/秒, 阿里核心系统百分百上云了。 如果把信息系统比做一个武...
相关热词 c# plc s1200 c#里氏转换原则 c# 主界面 c# do loop c#存为组套 模板 c# 停掉协程 c# rgb 读取图片 c# 图片颜色调整 最快 c#多张图片上传 c#密封类与密封方法
立即提问