Vue怎么插入带有v-model、@click、:class的标签。

首先我将后台传过来的\sf替换成我需要的标签
首先我将后台传过来的\sf替换成我需要的标签
数据变成了这样子,我该怎么渲染到页面上,v-html不可以数据变成了这样子,我该怎么渲染到页面上,v-html不可以

2个回答

大概明白你的意思,就是在js里面有HTML标签组成的语句,你想直接渲染到页面上。如果使用v-html渲染静态语句的时候是没有问题的,但是如果像你渲染如content1:'

add
'这样的语句是不会成功的。按照顺序,执行这条语句是在渲染页面完成以后执行的,所以没有被渲染,当然不会生效,在jquery中还有一些方法比如live,on等绑定父级元素对子元素进行渲染,由于vue的特性,不支持这样的动态渲染,目前没有什么好的解决方法,因为这样做也是比较危险不安全的。

直接v-for 循环啊

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
为什么在vue created方法中手动打开弹框后,关不了 html
<div id="rrapp" v-cloak> <div><input type="button" @click="dakai" v-model="name"></div> <div class="modal fade" id="TSBModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <!-- style=“width:900px--> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel1">漏洞检测任务</h4> </div> <div class="modal-body"> <table class="table table-condensed"> <tbody> <div clas="form-group"> <div class="col-xs-4"> <button id="t1" data-toggle="modal" data-target="#TSBModal3" onclick="vm.check2()">人工分析</button> </div> <div class="col-xs-4"> <button id="t2">自动化检测</button> </div> </div> <!-- <label class="col-sm-1 control-label" style="white-space : nowrap;font-size: 14px;margin-right: 10px;margin-top: 4px" >人工报告</label>--> </tbody> </table> </div> <div class="modal-footer"> <input type="hidden" value="=1" id="t"> <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" onclick="vm.fanhui()">返回 </button> <!-- <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal" @click="sendLog()">提交 </button>--> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </div> var vm = new Vue({ el: '#rrapp', data: { }, created: function () { this.getPageChange() }, methods: { getPageChange:function () { console.log(123123123) $("#TSBModal1").modal('show'); //手动开启 console.log(222); }, fanhui: function(){ $("#TSBModal1").modal('hide'); //手动关闭 },
请教关于使用JS实现浏览器简单自动登录的脚本
本人想用 JS 实现谷歌浏览器自动登录功能 以下为JS代码 ``` document.getElementById('username').value='admin'; document.getElementById('password').value='123456'; credentials.username='admin'; credentials.password='123456'; document.getElementById("submit").disabled=false; document.getElementById('submit').click(); ``` 目前问题是 用户名和密码都有 ng-model属性, 导致一直提示账号密码错误。 请问这种情况下 应该怎么修改。请各位大神指导下。 问题关键点: 关键点是 ng-model属性是双向绑定,页面提交的数据是credentials,而不是某个输入框的VALUE ;单独改VALUE或者直接credentials.username=赋值提交后是无效的。还是账号密码错误。;需要解决的是这种情况下如何给credentials里面的credentials.username和credentials。password正确的赋值。 下面是网页的源码: ``` <!DOCTYPE html><html class="no-js vui-layout-html" ng-app="esxUiApp" style="min-width: 768px;"><head class=""><style type="text/css" class="">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style> <title ng-bind="$root.title" class="">登录 - VMware ESXi</title> <meta charset="utf-8" class=""> <meta http-equiv="X-UA-Compatible" content="IE=edge" class=""> <meta http-equiv="cache-control" content="max-age=0" class=""> <meta http-equiv="cache-control" content="no-cache" class=""> <meta http-equiv="expires" content="0" class=""> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" class=""> <meta http-equiv="pragma" content="no-cache" class=""> <meta name="description" content="" class=""> <!-- The initial, max and min scale settings --> <meta name="viewport" content=" width=device-width, initial-scale=0.5001, minimum-scale=1.0001, maximum-scale=5.0001, user-scalable=yes" class=""> <!-- The following will hide the chrome on mobile Safari and Chrome on Android if the user has added a shortcut to their home screen. --> <meta name="mobile-web-app-capable" content="yes" class=""> <meta name="apple-mobile-web-app-capable" content="yes" class=""> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" class=""> <link rel="stylesheet" href="bower_components/vui-bootstrap/css/vui-bootstrap.min.css" class=""> <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" class=""> <link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css" class=""> <link rel="stylesheet" href="bower_components/codemirror/theme/mdn-like.css" class=""> <link rel="stylesheet" href="bower_components/nvd3/build/nv.d3.min.css" class=""> <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" class=""> <link rel="icon" type="image/x-icon" href="favicon.ico" class=""> <link rel="apple-touch-icon" href="apple-touch-icon.png" class=""> <link rel="stylesheet" href="node_modules/vfeed/vfeed.css" class=""> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css" class=""> <!-- endbuild --> <!-- we use vendor.css to allow partner customizations, normally it is empty --> <link rel="stylesheet" href="styles/vendor.css" class=""> <script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="scripts/main.js" class=""></script></head> <body ng-app="esxUiApp" class="base-app-style" style="overflow: hidden;"> <!--[if lt IE 7]> <p class="browsehappy"> You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience. </p> <![endif]--> <!-- Add your site or application content here --> <div class=""> <!-- uiView: --><div ui-view="" class=""><div class="loginContainer"> <img id="topSplash" src="images/AppBgPattern.png" alt="背景图像"> <div style="position: absolute; top: 65px; left: 65px;"> <img src="images/vmware_logo_white_transparent.png" style="width: 60%;"> </div> <form name="loginForm" ng-submit="login(credentials)" novalidate="" class="ng-pristine ng-valid"> <div id="loginForm"> <p class="loginRow ng-hide" ng-show="devmode || electron"> <label id="host-label" class="loginLabel">主机名 <input id="hostname" autocomplete="off" aria-labelledby="host-label" tabindex="1" ng-disabled="loggingIn" ng-class="{loginFailed: loginFailed}" class="margeTextInput ng-pristine ng-untouched ng-valid" type="text" ng-model="credentials.hostname" ng-model-options="{ updateOn: 'blur' }"> </label> </p> <p class="loginRow"> <label id="username-label" class="loginLabel">用户名 <input id="username" aria-labelledby="username-label" tabindex="2" focus-me="true" ng-disabled="loggingIn" ng-class="{loginFailed: loginFailed}" class="margeTextInput ng-pristine ng-valid ng-touched" type="text" ng-model="credentials.username"> </label> </p> <p class="loginRow"> <label id="password-label" class="loginLabel">密码 <input id="password" autocomplete="off" aria-labelledby="password-label" tabindex="4" ng-disabled="loggingIn" ng-class="{loginFailed: loginFailed}" class="margeTextInput ng-pristine ng-untouched ng-valid" type="password" ng-model="credentials.password"> </label> </p> <p>&nbsp;</p> <p id="loginButtonRow"> <input id="submit" class="button blue" type="submit" value="登录" ng-disabled="credentials.username === '' || loggingIn" disabled="disabled"> </p> </div> <div id="productName"> <img src="images/vmware_logo_white_transparent.png" style="width: 120px; margin-right: 10px;"> <img src="images/esxi.png" style="margin-bottom: 2px; width: 60px;"> <!-- ngIf: loggingIn --> <!-- ngIf: status !== null --> <div ng-show="welcome !== null &amp;&amp; !loggingIn &amp;&amp; !initializing" ng-style="{'margin-top': status === null ? '29px' : '10px'}" class="loginWelcome ng-hide" style="margin-top: 29px;"> <div ng-bind-html="welcome | escapeHtml | linebreak"></div> <div ng-show="accept !== null" style="margin: 10px; text-align: right;" class="ng-hide"> <label> <input type="checkbox" tabindex="3" ng-model="accepted" style="margin: 0 5px 0 0;" class="ng-pristine ng-untouched ng-valid"> </label> </div> </div> </div> </form> <div id="footer" class="footer"> <a href="https://www.vmware.com/cn/support/pubs/" target="_blank"> <i class="esx-icon-help-new-window" style="margin-top: -3px; margin-right: 6px;"></i>打开 VMware Host Client 文档</a> <div style="float: right;"></div> </div> </div> </div> </div> <!-- Fixes required for electron --> <script class=""> var _loc = String(window.location); if (_loc && _loc.indexOf('file:///') >= 0) { // requireJS has a bit of a crippled exporting mechanism for node, so we need to pull // these objects up into global scope. require('./bower_components/es6-promise/es6-promise.min.js'); window.$ = window.jQuery = require('./bower_components/jquery/dist/jquery.min'); require('./bower_components/jquery-ui/jquery-ui.min'); window.I18n = require('./bower_components/i18n-js/app/assets/javascripts/i18n.js') window.vsphere = require('./thirdparty/vspherejs/index.js') window.ipaddr = require('./bower_components/ipaddr/ipaddr.min.js'); } </script> <!-- end electron --> <!-- build:js(.) scripts/oldieshim.js --> <!--[if lt IE 9]> <script src="bower_components/es5-shim/es5-shim.js"></script> <script src="bower_components/json3/lib/json3.js"></script> <![endif]--> <!-- endbuild --> <script src="bower_components/jxon/index.js" class=""></script> <script src="bower_components/i18n-js/app/assets/javascripts/i18n.js" class=""></script> <script src="bower_components/es6-shim/es6-shim.min.js" class=""></script> <!-- The main entry point for Angular --> <script src="bower_components/requirejs/require.js" data-main="scripts/main" class=""></script> </body></html> ```
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()
vue slot插槽内控件不显示值
``` <el-row> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane name = "waitTodo"> <span slot="label"> <i class="el-icon-message">待处理</i> <el-badge v-model="waitTodo" :max="99" class="item"></el-badge> </span> </el-tab-pane> <el-tab-pane label="已处理" name="done"></el-tab-pane> <el-tab-pane name="waitToAssign"> <span slot="label"> <i class="el-icon-message">待指派</i> <el-badge v-model="waitToAssign" :max="99" class="item"></el-badge> </span> </el-tab-pane> <el-tab-pane label="审核未通过的" name="reject"></el-tab-pane> </el-tabs> </el-row> ``` 上图是代码,我在Tab的slot中定义了一个badge,显示待处理和待指派的数量,后台已经拿到了,也返回了值,之前项目用的是Vue+elementUI,现在换成了vue-elementui-admin,之前是可以正常显示的,现在必须进入页面后手动切换一下Tab才会显示数量,求教大佬们这是为什么,下面是具体情况:![图片说明](https://img-ask.csdn.net/upload/201906/26/1561542885_188585.png)![图片说明](https://img-ask.csdn.net/upload/201906/26/1561542892_833638.png)
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); } }) }, ```
local storage存值与取值
<form action="" style="text-align: center;margin-top: 20%;"> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input style="margin-left: -100px;margin-top: 10px;" type="text" id="user" v-model="user.user" placeholder="请输入账号"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-inline"> <input style="margin-top: 10px;" type="password" v-model="user.password" placeholder="请输入密码"> </div> <div class="layui-form-item" > <label class="layui-form-label">职业</label> <div class="layui-input-inline"> <input type="radio" name="name1" value="0" v-model="user.idten" title="学生" >学生 <input type="radio" name="name1" value="1" v-model="user.idten" title="教师">教师 <input type="radio" name="name1" value="2" v-model="user.idten" title="宿管" >宿管 </div> </div> <input type="button" @click="userLogin($event)" class="layui-btn layui-btn-normal" value="登录" /> </form> ``` 前端代码 created(){ localStorage.setItem("user.user",user); }, 第二页面 created(){ var params={"student_number":localStorage.getItem("user.user")}; axios.post("/apartment2019/findWeijiByStudent_number",params).then((res)=>{ this.student1=res.data.list; }); }, 运行之后显示student_number不识别,我该怎么把这个用户名保存在local storage中并在下一页面获取。
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>
利用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> ```
vue elemen form 循环加组件抽离形式怎么才能准确的传值???加急!!!!!
父组件 ``` <el-form :model="AddData" ref="AddData" label-width="220px" class="demo-ruleForm" key="AddData" :rules="Addrules"> <span v-for="(item,index) in AddData.debtorVOList" :key="index+'c'"> <h4 class="Title">出质人信息 {{+index+1}} <el-button type="text" @click="addDomain('debtor')" v-if="index+1==1" class="green">增加</el-button> <el-button type="text" @click="removeDomain(item,'debtor')" v-if="index+1!=1" class="red">移除</el-button></h4> <FormAddData :FormAddData="item" :index=index :AddQuery="AddQuery" :regionTree=regionTree :Addrules=Addrules></FormAddData> </span> </el-form> ``` 子组件 ``` <el-form-item label="质权人类型" prop="" :rules="Addrules.type"> <el-select v-model="FormAddData.type" prefix-icon="el-icon-search" clearable placeholder="请选择" @change="change_Pledgor(FormAddData)"> <el-option v-for="item in AddQuery.businessPersonTypeList" :key="item.dictionaryValue" :label="item.dictionaryValueDesc" :value="item.dictionaryValue"> </el-option> </el-select> </el-form-item> ``` 子组件的prop 直接写type 的话 那不到值 又不知道怎么写 for循环的我写过 ``` :prop="'debteeVOList.'+ index +'.type'" ``` 这样就好用 组件抽离的找不到该怎么写 求教
关于element v-for 循环子组件表单的验证问题
// 子组件: <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> <script> export default { props: { propsRuleForm: Object }, data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm: this.propsRuleForm, rules: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script> // 父组件: <el-button @click="submit">提交</el-buttom> <div v-for="(item, index) in List" :key="index"> <children @propsRuleForm="item" /> </div> <script> import children form './children.vue' export default { data () { List: [ { pass: '', checkPass: '', age: '1' }, { pass: '', checkPass: '', age: '2'} ] }, methods: { submit () { // 求校验所有form的方法,如果通过执行下一步,如果不通过提示哪个form验证不通过 } } } </script> 求校验所有form的方法,如果通过执行下一步,如果不通过提示哪个form验证不通过
提示信息位置偏移 $notify $message 是什么原因造成的
各路道友们,在使用this.$notify 的时候,其中一个页面出现位置偏移的情况,在我本地的电脑上,提示信息的位置是正确的,右上角,但是在测试的电脑上,位置就偏移了,展示不全。但是其他页面的类似提示信息位置是正常的 改用this.$message依然在测试的电脑上展示不全 给$message设置offset属性依然展示不全,现在看来,不是$message的问题,应该是其他地方的问题,也许是其他地方的样式影响了,但是在我本地电脑位置就正确,还有可能是什么问题影响的呢,迷惑迷惑 代码如下 ``` //html代码 <template> <div class="app-container calendar-list-container"> <basic-container> <template> //这是一个tab切换的页面 //现在测试出现的问题是第二个tab密码管理页面的提示信息位置不正确 <el-tabs v-model="activeTab" @tab-click="switchTab"> <el-tab-pane label='信息管理' name='userManager'> <el-row> <el-col :span="12"> <div class="grid-content bg-purple"> <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" v-if="switchStatus==='userManager'" class="demo-ruleForm"> <el-form-item label="用户名" prop="username"> <el-input type="text" v-model="ruleForm1.username" disabled></el-input> </el-form-item> <el-form-item label="手机号" prop="phone"> <el-input v-model="ruleForm1.phone" placeholder="验证码登录使用"></el-input> </el-form-item> <el-form-item label="头像"> <el-upload class="avatar-uploader" action="/file/upload" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess"> <img id="avatar" v-if="ruleForm1.avatar" :src="avatarUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <!-- <el-form-item label="社交登录" prop="social"> <a href="#" style="color: blue" @click="handleClick('wechat')">绑定微信</a> </el-form-item> --> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm1')">提交 </el-button> <el-button @click="resetForm('ruleForm1')">重置</el-button> </el-form-item> </el-form> </div> </el-col> </el-row> </el-tab-pane> //这个页面写了$notify //我本地电脑的显示位置是正常的,但是测试那边是不正常的,位置有偏移 <el-tab-pane label='密码管理' name='passwordManager'> <el-row> <el-col :span="12"> <div class="grid-content bg-purple"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" v-if="switchStatus==='passwordManager'" class="demo-ruleForm"> <el-form-item label="原密码" prop="password"> <el-input type="password" v-model="ruleForm2.password" auto-complete="off"></el-input> </el-form-item> <el-form-item label="密码" prop="newpassword1"> <el-input type="password" v-model="ruleForm2.newpassword1" auto-complete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="newpassword2"> <el-input type="password" v-model="ruleForm2.newpassword2" auto-complete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm2')">提交 </el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item> </el-form> </div> </el-col> </el-row> </el-tab-pane> </el-tabs> </template> </basic-container> </div> </template> //js代码 //两个tab切换的提交调用了同一个方法,只是传进去的form数据不一样,但是 密码管理 的提示信息位置就跑偏了 submitForm(formName) { // console.log(formName) this.$refs[formName].validate(valid => { if (valid) { request({ url: '/admin/user/edit', method: 'put', data: this.ruleForm2 }).then(response => { if (response.data.data) { this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000, position:top-right, }) // 修改密码之后强制重新登录 if (this.switchStatus === 'passwordManager') { this.$store.dispatch('LogOut').then(() => { location.reload() // 为了重新实例化vue-router对象 避免bug }) } } else { this.$notify({ title: '失败', message: response.data.msg, type: 'error', duration: 2000 }) } }).catch(() => { this.$notify({ title: '失败', message: '修改失败', type: 'error', duration: 2000 }) }) } else { return false } }) }, ``` 这是测试看到的 ![图片说明](https://img-ask.csdn.net/upload/201909/10/1568098114_606182.jpg) 这是我本地电脑上的 ![图片说明](https://img-ask.csdn.net/upload/201909/10/1568098535_252205.jpg) 这是什么原因造成的a
element 动态创建表单项 添加自定义校验规则
把校验规则写在js里就不行了,生成多个表单项,只要有一个符合条件就过了, <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules=" required:awardRules.steps' " > 为什么 html ``` <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules=" required:awardRules.steps' " > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> <el-button @click="addDomain">新增域名</el-button> <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> </el-form-item> </el-form> ``` js
关于vue.js验证输入与旧密码是否一致
如何用vue.js写一个 修改密码中 验证旧密码是否写错 ,先谢谢大佬帮忙了 <template> <div class="app-container"> <el-form ref="page" :rules="rules" :model="page" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;"> <el-form-item label="旧密码" prop="oldPassword"> <el-input v-model="page.oldPassword" type="password" /> </el-form-item> <el-form-item label="新密码" prop="newPassword"> <el-input v-model="page.newPassword" type="password" /> </el-form-item> <el-form-item label="确认密码" prop="confirmPassword"> <el-input v-model="page.confirmPassword" type="password" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer" style="margin-left: 150px"> <el-button type="primary" @click="submitForm('page')">提交</el-button> </div> </div> </template> <script> import waves from '@/directive/waves' // 水波纹指令 import { changePwd } from '@/api/system' export default { name: 'PwdPage', directives: { waves }, data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码!')) } else { if (this.page.confirmPassword !== '') { this.$refs.page.validateField('confirmPassword') } callback() } } var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码!')) } else if (value !== this.page.newPassword) { callback(new Error('两次输入密码不一致!')) } else { callback() } } return { page: { oldPassword: '', newPassword: '', confirmPassword: '' }, rules: { oldPassword: [ { required: true, message: '请输入旧密码!', trigger: 'blur' }, { min: 6, max: 64, message: '长度在6-64个字符!', trigger: 'blur' } ], newPassword: [ { required: true, message: '请输入新密码!', trigger: 'blur' }, { min: 6, max: 64, message: '长度在6-64个字符!', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ], confirmPassword: [ { required: true, message: '请输入确认密码!', trigger: 'blur' }, { validator: validatePass2, trigger: 'blur' } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { const userName = this.$store.getters.name const { oldPassword, newPassword } = this.page changePwd({ userName, oldPassword, newPassword }).then(resp => { }) } else { return false } }) } } } </script> <style scoped> </style>
elementUI中popover的使用问题 被包裹的定位元素不见了?
这是没有在图标外面包裹popover的 我给div.addpaper加了position: fixed;可以显示 ``` <div class="addpaper"> <el-badge :value="12" class="item"> <i class="el-icon-shopping-cart-1"></i> </el-badge> </div> ``` 但是我在外面包裹了elementUI的popover之后整个div.addpaper元素就看不见了 ``` <el-popover placement="top" width="160" v-model="addPaperVisible"> <p>这是一段内容这是一段内容确定删除吗?</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="visible = false">取消</el-button> <el-button type="primary" size="mini" @click="visible = false">确定</el-button> </div> <div class="addpaper"> <el-badge :value="12" class="item"> <i class="el-icon-shopping-cart-1"></i> </el-badge> </div> </el-popover> ``` 有人知道为什么嘛
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)后的截图。 对于上面出现的两个问题,还请各位大佬解答一下,万分感谢!!!
怎么实现点击事件点击展开更多
``` <div v-for="(ite, index) in thistype" :key="index" class="refine2"> <h4>{{thistype[index].name}}</h4> <div v-for="(item, num) in ite.lists" :key="num"> <input v-if="index < ab" type="checkbox" :value="item.key +':'+ item.name" v-model="check" :id="item.name" :data-radius='item.key' @change="handleValue(item)"> <label v-if="index < ab" :for="item.name">&nbsp;{{item.name}}&nbsp;&nbsp;({{item.count}})</label> </div> <el-button type="text" size="mini" v-on:click="show(ite.index)" :data-id="ite.index" style="color: #316c9d;">{{ showMore ? 'Hide Last 15 ' : 'Show 14 More'}}</el-button></div> ``` show (ite) { console.log(ite) this.ab = this.thistype[2].lists.length this.showMore = !this.showMore if (this.showMore == true) { this.ab = 5 } },
为什么使用.resetFields()重置 无效?
``` <el-form :model="articleData" :ref='articleData' :rules="editRules" label-position="right" label-width="80px" > ``` 设置了form 之后 对应的prop也设置了 ``` <el-row> <el-col :sm="24" :md="16"> <el-form-item label="文章标题" prop="name"> <el-input v-model="articleData.name"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :sm="24" :md="16"> <el-form-item label="栏目" class="catalog-list" prop="catalogs"> <el-dropdown trigger="click" placement="bottom-start" style="width:100%" id="dropdown"> <el-select ``` 点击提交按钮 想要重置 ``` console.log(this.$refs['articleData'],'这里是获取的refs') if (this.$refs['articleData']!==undefined) { this.$refs['articleData'].resetFields(); } ``` 这里的console.log获得的是undefined 这是为什么?
多个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++); } } ``` 但是问题是,修改一行数据,所有的数据都变了,想着可以用作用域插槽,但是不知道怎么添加。。求解
vue.js多个选项下如何动态添加各自文本框input?
1:问题描述:比如页面上有A问题、B问题...甚至更多问题, A问题下可以动态增加文本框input,B问题下也可以动态增加input。现在遇到的bug是A问题增加input,B问题同时也增加input。同理B问题增加input时A问题也增加了。怎么区分开呢?删除也一样。 下面代码: ``` <template> <div> <ul> <li class="rep-item" v-for="(item,index) in list" :key="index"> <div class="title border-bottom" @click="changeContent(index)"> <span>{{item.title}}</span> <span @click.stop="addInput(index)">增加</span> </div> <div class="box border-bottom" v-show="item.showContent"> <div v-for="(item, key) in inputs"> {{item.id}}: <input class="rep-ipt" type="text" v-model="item.val" placeholder="填写需要维修内容"> <span class="iconfont" @click="delInput(key)">&#xe608;</span> </div> </div> </li> </ul> </div> </template> ``` ``` <script> export default { data(){ return{ inputs: [], list:[ { title: 'A问题', showContent: false, }, { title: 'B问题', showContent: false, } ] } }, methods:{ changeContent(index){ this.list[index].showContent = !this.list[index].showContent; }, addInput (index) { var input = {} input.id = this.inputs.length input.val = "" this.inputs.push(input) }, delInput (index) { this.inputs.splice(index, 1); }, } } </script> ``` 我尝试在addInput里面加上index: ``` addInput (index) { var input = {} input.id = this.inputs[index].length input.val = "" this.inputs[index].push(input) }, ``` 在v-for inputs中加上index ``` v-for="(item, key) in inputs[index]" ``` 貌似不对 ![图片说明](https://img-ask.csdn.net/upload/201907/09/1562662767_552429.png)
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载 点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。 ...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
计算机专业的书普遍都这么贵,你们都是怎么获取资源的?
介绍几个可以下载编程电子书籍的网站。 1.Github Github上编程书资源很多,你可以根据类型和语言去搜索。推荐几个热门的: free-programming-books-zh_CN:58K 星的GitHub,编程语言、WEB、函数、大数据、操作系统、在线课程、数据库相关书籍应有尽有,共有几百本。 Go语言高级编程:涵盖CGO,Go汇编语言,RPC实现,Protobuf插件实现,Web框架实...
小白学 Python 爬虫(25):爬取股票信息
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学 Python 爬虫(4):前置准备(三)Docker基础入门 小白学 Python 爬虫(5):前置准备(四)数据库基础 小白学 Python 爬虫(6):前置准备(...
卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!
作者 | Rocky0429 来源 | Python空间 大家好,我是 Rocky0429,一个喜欢在网上收集各种资源的蒟蒻… 网上资源眼花缭乱,下载的方式也同样千奇百怪,比如 BT 下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的 x 雷和某度网盘成了我经常使用的工具。 作为一个没有钱的穷鬼,某度网盘几十 kb 的下载速度让我...
《面试宝典》2019年springmvc面试高频题(java)
前言 2019即将过去,伴随我们即将迎来的又是新的一年,过完春节,马上又要迎来新的金三银四面试季。那么,作为程序猿的你,是否真的有所准备的呢,亦或是安于本职工作,继续做好手头上的事情。 当然,不论选择如何,假如你真的准备在之后的金三银四跳槽的话,那么作为一个Java工程师,就不可不看了。如何在几个月的时间里,快速的为即将到来的面试进行充分的准备呢? 1、什么是Spring MVC ?简单...
一名大专同学的四个问题
【前言】   收到一封来信,赶上各种事情拖了几日,利用今天要放下工作的时机,做个回复。   2020年到了,就以这一封信,作为开年标志吧。 【正文】   您好,我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。   先说一下我的基本情况,高考失利,不想复读,来到广州一所大专读计算机应用技术专业。学校是偏艺术类的,计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
害怕面试被问HashMap?这一篇就搞定了!
声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java集合中的精髓了,如果你觉得自己对它掌握的还不够好,我想今天这篇文章会非常适合你,至少,看了今天这篇文章,以后不怕面试被问HashMap了 其实在我学习HashMap的过程中,我个人觉得HashMap还是挺复杂的,如果真的想把它搞得明明白...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
(总结)阿里面试问了ArrayList,都问了啥?
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
2020年1月中国编程语言排行榜,python是2019增长最快编程语言
编程语言比例 排名 编程语言 最低工资 工资中位数 最低工资 最高工资 人头 人头百分比 1 rust 20713 17500 5042 46250 480 0.14% 2 typescript 18503 22500 6000 30000 1821 0.52% 3 lua 18150 17500 5250 35000 2956 0.84% 4 go 17989 16...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
工作十年的数据分析师被炒,没有方向,你根本躲不过中年危机
2020年刚刚开始,就意味着离职潮高峰的到来,我身边就有不少人拿着年终奖离职了,而最让我感到意外的,是一位工作十年的数据分析师也离职了,不同于别人的主动辞职,他是被公司炒掉的。 很多人都说数据分析是个好饭碗,工作不累薪资高、入门简单又好学。然而今年34的他,却真正尝到了中年危机的滋味,平时也有不少人都会私信问我: 数据分析师也有中年危机吗?跟程序员一样是吃青春饭的吗?该怎么保证自己不被公司淘汰...
立即提问