vue删除选框选中内容功能

图片说明图片说明

<el-card :body-style="{ padding: '0px' }">
          <img :src="item.url" class="image">

下面是新加的选框按钮,用element引入,还有就是用v-model绑定时,点击一个所有都会选中,搞不懂。
          <el-checkbox  class="check"></el-checkbox>

大佬求解答~~~ 我用axios获取json文件,然后渲染到页面上,现在想做一个删除功能,点击删除按钮删除多选框选中内容, 跪求回复~~~最好能上代码~

2个回答

我没看到不写的删除按钮 和 多选, 有什么不懂的可以直接到Element UI官网上看案例, 或者直接复制官网的案例到自己的项目上试一试 , 然后再慢慢的改成你想要的东西 , 这样有助于你对Element UI的认识; http://element-cn.eleme.io/#/zh-CN/component/checkbox

终于做好了,element的多选框多选用 :value="index" v-model="checked"绑定数组一直搞不好,
点一个其他的也跟着被选中,不知道是不是-vfor循环的原因,索性用普通的多选框来做,用 :value="index" v-model="checked"绑定数组后可以获取index的值,在数组中把它对应的列删掉就好,下面贴代码

  <img :src="item.url" class="image">
          <!--技术有限,只能换成普通多选框,其他不变
                     <input type="checkbox" :value="index" v-model="checked" class="check">

以下是功能按钮,删除键

```



  • 搜索


  • 导入


  • 分享


  • 删除



这是点击删除时绑定的函数

methods: {
remove(){
// this.checked
var aaa ;
//选项的值进行排序,否则顺序错乱
var $checked = this.checked.sort();
for (var i = $checked.length ; i > 0 ; i--) {
//长度-1是对应的下标
aaa = this.checked[i-1];
this.getData.splice(aaa,1);

    }
    //数组归零
    this.checked = [];
  },
},
大概就这样,新手编写,百度了很久自己调试了一早上才做好,一定注意多选框绑定的数组里的元素顺序,不排序的话...不信邪地孩子可以自己玩,
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Ant design vue 表格如何设置选中行进行设置复选框选中效果( 目前完成了百分之九十... 差高人相助 )

这张图点击了几行的数据, 可以看到所选行是有标识的. ----- ![图片说明](https://img-ask.csdn.net/upload/201905/13/1557730315_88518.jpg) 这张就是点击了一次复选框, 然后电机的第四行, 才能显示选中效果 ----- ![图片说明](https://img-ask.csdn.net/upload/201905/13/1557730302_970165.jpg) 这是代码 ----- ``` <s-table ref="table" size="default" rowKey="key" :columns="columns" :data="loadData" :alert="options.alert" :rowSelection="options.rowSelection" :customRow="setRow" > ``` ----- ``` data: { selectedRowKeys: [], selectedRows: [], // custom table alert & rowSelection options: { alert: { show: true, clear: () => { this.selectedRowKeys = [] } }, rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange } }, optionAlertShow: false } } ``` --------- ``` setRow (record) { return { on: { click: () => { let flag = false let keys = [] keys = this.selectedRowKeys if(keys.indexOf(record.id) >= 0) { flag=true } if(flag){ keys.splice(keys.findIndex(item => item === record.id), 1) this.selectedRows.splice(this.selectedRows.findIndex(item => item === record.id), 1) } else { keys.push(record.id) this.selectedRows.push(record) } // this.options.rowSelection.selectedRowKeys = this.selectedRowKeys // this.options.rowSelection.selectedRows = this.selectedRows // this.selectedRowKeys = keys this.onSelectChange(keys, this.selectedRows) console.log(flag) console.log(JSON.stringify(this.selectedRowKeys)) } } } } ```

vue.js如何渲染select使得其有默认选中

![图片说明](https://img-ask.csdn.net/upload/201708/16/1502846667_927559.png) 这个是详情页面的代码,能从后台获取到下拉框内容,但是却没办法将原先选中的选项设置为selected,只能将它放在第一个,这样就会有两个该选项![图片说明](https://img-ask.csdn.net/upload/201708/16/1502846418_865185.png) 要实现如下图的效果![图片说明](https://img-ask.csdn.net/upload/201708/16/1502846449_239241.png) 拜托了各位~~

在For循环中渲染复选框并在Vue JS中绑定它们的值

<div class="post-text" itemprop="text"> <p>I am trying to create some filters to filter data from the database using a combination of the more than one checkbox. Something like this.</p> <p><a href="https://i.stack.imgur.com/woGkR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/woGkR.png" alt="enter image description here"></a></p> <p>I am getting redirected from a landing page to this page where properties are listed with some get variables. in my case, I have 3 get variables in this request. $location, $type and $price. Now I want whatever location is in $location variable the checkbox should be checked which has the same value as $location. In my case for instance: if my $location == candolim then candolim checkbox should be checked automatically.</p> <p>Then using that I will send an AJAX request to the server to fetch properties. Now here I am using Laravel and Vue Js. Axios for requests. </p> <p>So initially when I got redirected here from landing page search filter; in the request has variables called $locaton, $type and $price. Here I am using Vue js. whenever the page is loaded and Vue Instance is created I am fetching all the locations available in the database and displaying them here with checkboxes. so here is how I am displaying that:</p> <pre><code> &lt;p&gt;SEARCH BY LOCATION&lt;/p&gt; &lt;span v-for="item in allLocations"&gt; &lt;input type="checkbox"&gt; &lt;span class="checkbox-label"&gt; @{{item.location}} &lt;/span&gt; &lt;br&gt; &lt;/span&gt; &lt;hr&gt; </code></pre> <p>So now my question is How can I get the value of every checkbox which is clicked using Vue? And how can I check a checkbox which has value same as $location which I am getting from the landing page using get request?</p> <p>I know guys this question is very confusing but this is how i can explain what i want. Please help. Thank you.</p> </div>

vue中怎么获取Checkbox多选值

![图片说明](https://img-ask.csdn.net/upload/201712/04/1512375077_832149.png) 循环生成多条数据(每条数据都有多选),怎么获取选当前行的多选数据

vue用button实现粘贴功能

已经写好了复制,现在不知道怎么用按钮粘上 copyToClipboard(elemRef) { let target; let succeed = false; if(this.$refs[elemRef]){ target = this.$refs[elemRef]; // 选择内容 let currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // 复制内容 try { succeed = document.execCommand("copy"); alert("内容复制成功"); } catch (e) { succeed = false; } // 恢复焦点 if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } } return succeed; }, <el-button data-clipboard-text="copy" @click="copyToClipboard('text')" type="primary" >Copy </el-button>

vue 中多个关键字选择,怎么把选中的关键字存到数组中重复被点击的就从数组中删除???

![图片说明](https://img-ask.csdn.net/upload/201709/12/1505197644_576961.png) 如图,被选中标签的内容会存入一个数组,再次点击的时候就删除数组中对应的元素,最后返回这个数组?

Vue小白想请教如何用vue实现导入导出excel表格内容

想请教一下各位!! 如何用vue实现excel表格内容的导入导出啊,用按钮实现点击然后可以导入excel文件,也可以一键导出

jq无法获取select下拉选框默认选中的val

var optionEle = $("<option></option>").append(this.purName).prop("value",this.purchaserId).attr("selected",true);添加select下来选项默认选中。 但是一下三种方式均无法获取: var selected= $("#goodPurchasers").val(); var selected2= $("#goodPurchasers option[selected=selected]").attr("value"); var selected3 = $("#goodPurchasers option:first").attr("value");

vue实现QQ快捷键设置的功能!!!

格式为Ctrl+X这样的。(两个组合键) 第一个按键只能是Ctrl,第二个按键只能是字母,当按下Ctrl后没按其他键,放开Ctrl后,输入框变空。

vue.js怎样点击改变li样式并获取到其内容。

用vue框架做一个列表点击改变li的样式并获取到内容然后渲染到<p></p>,该怎么操作? ``` <ul class="menuList"> <li v-for="(site,index) in sites" v-on:click="chooesMenu(index)" :class="{'activeList':Index===index}" >{{site.name}}</li> </ul> ``` 这是Html 。 js: ``` data:{ Index:0,} method:{ chooesMenu:function(index){ this.Index=index; var menuText = index.currentTarget.innerText; console.log(menuText); document.getElementsByClassName("title")[0].innerText = menuText; }, } ``` 这样可以实现点击改变li背景颜色,但是不能获取到内容到p标签。而且会报错,报错如下: ![图片说明](https://img-ask.csdn.net/upload/201908/30/1567131290_560656.png) 麻烦有路过的大神指点指点!

element vuejs select 选中项不回显

我用了vue2 & elementUI 1.3.0来实现select功能已经更新到最新版本,确定不是版本问题 ![图片说明](https://img-ask.csdn.net/upload/201706/02/1496390044_236245.png) 下拉框的option数据,是从非父子组件传递过来的 动态form表单弹出如图所示 ![图片说明](https://img-ask.csdn.net/upload/201706/02/1496390129_724794.png) 选中select的option不能显示,但是提交的时候能够获取正确的数据。

vue 选中input中搜索按钮弹框中数据如何绑定到input上

![图片说明](https://img-ask.csdn.net/upload/201903/29/1553836847_447320.png)![图片说明](https://img-ask.csdn.net/upload/201903/29/1553836858_133883.png) ``` <el-form-item> 产品代码 <el-input title="产品搜索帮助" size="mini" placeholder="请输入产品代码" ></el-input> <el-button icon="el-icon-search" @click="dialogFormVisible2 = true" circle ></el-button> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-new" @click="getList">查询</el-button> </el-form-item> ``` ``` <el-dialog title="整车主文件搜索帮助" :visible.sync="dialogFormVisible2"> <el-form > <el-form-item> 产品代码<el-input id="carId"></el-input> <!-- 车型代码<el-input v-model="input"></el-input> --> 最大限制数量<el-input type="number" id="carNum" ></el-input> </el-form-item> <el-form-item prop="busType"> <el-radio v-model="radio" label="1">模糊查询</el-radio> </el-form-item> <el-form-item> <el-button type="primary" @click="getList2" >查询</el-button> </el-form-item> <div class="table"> <!-- 产品代码 --> <el-table height="350" :data="tableData2"> <el-table-column prop="VProductCode" label="产品代码"></el-table-column> <el-table-column prop="VProductName" label="产品名称"></el-table-column> </el-table> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button> <el-button @click="dialogFormVisible2 = false">取 消</el-button> </div> </el-dialog> ```

vue中如何添加按钮实现复制粘贴剪切功能,已经用clipboard做出复制,但是怎么剪切和粘贴?

<el-button data-clipboard-text="copy" @click="copyToClipboard('text')" type="primary" >Copy </el-button> data() { return { loading: false } }, methods: { //复制内容到粘贴板 copyToClipboard(elemRef) { let target; let succeed = false; if(this.$refs[elemRef]){ target = this.$refs[elemRef]; // 选择内容 let currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // 复制内容 try { succeed = document.execCommand("copy"); } catch (e) { succeed = false; } // 恢复焦点 if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } } return succeed; } }, clipboard做出了复制功能,但是怎么做出粘贴和剪切?

vue-cli3如何实现pdf在线预览功能

vue-cil3如何实现pdf在线预览,并能获取到pdf页面的文本内容。 最好插件不是滚动条形式,只显示pdf文件一页的内容,并具有翻页功能。

点击多选框 然后库存总量为0 的一行数据 隐藏 在点击 就不隐藏了?

![图片说明](https://img-ask.csdn.net/upload/202005/14/1589423418_544832.png) 点击多选框 然后库存总量为0 的一行数据 隐藏 在点击 就不隐藏了

uni-app怎么选中一段文本并弹出一个自己定义的搜索、复制悬浮框,并给选中文字划线。

在安卓和ios端显示的一段文本,当手指长按时会出现“复制、划重点、笔记、讨论、提问、词典”等文字的弹框。然后手指按住选中文字两端的水滴图标,左右上下滑动可以改变选中区域的大小。当点击"划重点"或者“笔记”时就会出现被选中文本的背景色改变。![图片说明](https://img-ask.csdn.net/upload/201907/26/1564109624_893663.png)![图片说明](https://img-ask.csdn.net/upload/201907/26/1564109600_5880.png)

vue实现带截图和分屏的功能

右侧是菜单,左侧区域是视频,左侧区域视频做分屏处理,鼠标悬浮上去,展示播放 声音 以及选中 和截图下载功能。 分屏功能类似网站的这个功能:http://nvr.liveqing.com:10800/#/screen。这个网站视频点击选择通道就可以选中视频播放。 而且视频为h5视频。需要能播放rstp视频流地址: 下面是写的代码,但是不知道怎么不同视频播放不同rstp视频。并且还有截图功能。目前想到的是canvas截图功能,具体写法不怎么熟悉,而且希望图标能跟http://nvr.liveqing.com:10800/#/screen这网站的播放器图标类似,鼠标移入显示图标。目前我的视频图标是视频本身默认自带的。 我需要解决的问题是: 1、不同视频播放不同rstp视频 2、实现鼠标移入出现视频自定义图标, 3、实现视频截图功能。 4、分屏优化 5、最好是能提供播放rstp流的代码以及思路以及上面1、2、3、4等代码以及思路 要实现的详细功能阐述: 一、未播放状态 1、默认显示未播放状态 2、点击选中播放框,再单击左侧摄像机列表中的摄像机,对应选中的播放框中开始加载显示视频 二、播放中状态 1、显示实时视频画面,左上角显示当前时间、右下角显示摄像机名称 2、鼠标移入时显示截图、静音、全屏、关闭、视频算法选择select功能 (1)点击视频画面,选中当前视频播放框,可重新选中摄像机播放新的视频流 (2)点击右上角的“关闭”图标,关闭当前视频画面,显示为未播放状态 (3)鼠标移入右下角 截图图标,显示“截图”提示信息;点击截图图标,对当前画面进行截图,图片自动保存到系统-下载目录中 (4)视频默认播放有声音,可通过点击右下角的喇叭图标进行静音和取消静音切换,鼠标移入图标相应显示静音或取消静音提示信息 (5)右下角全屏,鼠标移入,显示“全屏”信息,点击将全屏显示当前视频 (6)左下角显示 实时视频和智能视频切换,智慧视频即叠加了算法的视频画面 ![图片说明](https://img-ask.csdn.net/upload/202006/07/1591505053_9990.png) 下面是写的分屏的代码: ``` <template> <!-- 分屏 --> <div style="overflow: hidden;"> <el-row type="flex" :gutter="10" justify="center" v-show="!fullscreen"> <el-col :span="4"> </el-col> <el-col :span="16"><div class="grid-content bg-purple"> <el-button-group> <el-button :type="classtype1" @click="selecttype('classtype1',1,24)">单屏</el-button> <el-button :type="classtype2" @click="selecttype('classtype2',4,12)">四分屏</el-button> <el-button :type="classtype3" @click="selecttype('classtype3',9,8)">九分屏</el-button> <el-button :type="classtype4" @click="selecttype('classtype4',16,6)">十六分屏</el-button> <el-button > <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"> <i class="el-icon-rank"></i> </el-tooltip> </div> </el-button> </el-button-group> </div> </el-col> <el-col :span="4"> </el-col> </el-row> <div class="main"> <div class="conter"> <el-row :gutter="10" > <el-col v-for="(n,index) in fornum" :xs="24" :sm="24" :md="clonum" :lg="clonum" :xl="clonum" :key="index" > <div class="player-wrapper" element-loading-text="加载中..." element-loading-background="#000"> <div class="video-wrapper" :id="`videoid${n}`"> <div class="video-inner live hide-waiting" style=""> <div class="alt" :class="selectedindex === index? 'altChange' :'alt'" @click="getVideo(index, item)"> <div class="talbetop"> <div style="" class="video"> <ali-player @play="play($event)" class='aliPlayer' :useFlashPrism="true" :autoplay="true" :isLive="true" :rePlay="false" :showBuffer="true" showBarTime="5000" width="100%" height="100%" controlBarVisibility="hover" source="rtmp://124.139.232.61:1935/live/livestream" > </ali-player> </div> <div class="operate"> <div class="close-video"> <svg class="svg-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B"> <use xlink:href="#close"></use> </svg> </div> <div class="operate-button"> <div class="button-option"> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in optionValue" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="button-right"> <svg class="camera-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B"> <use xlink:href="#camera 2"></use> </svg> <svg class="voice-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B"> <use xlink:href="#voice"></use> </svg> <svg class="fullscreen-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B"> <use xlink:href="#ic_fullscreen"></use> </svg> </div> </div> </div> <table> <tr> <td>无信号</td> </tr> </table> <div v-show="true" class="selectchannel" @click="dialogFormVisible=true"> 选择通道</div> </div> </div> </div> </div> </div> </el-col> </el-row> </div> <div class="footer"></div> </div> <el-dialog title="收货地址" :visible.sync="dialogFormVisible"> 这是测试 <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </div> </el-dialog> </div> </template> <script> import aliplayer from "@/components/public/AliPlayer.vue" export default { components: { "ali-player": aliplayer, }, data () { return { fullscreen: false, selectedindex:'', fornum:4, clonum:12, dialogFormVisible:false, videoclass:"padding-bottom: 4px; position: relative; margin: 0px auto;", classtype1:'', classtype2:'primary', classtype3:'', classtype4:'', items:[false,false,false,false], optionValue:[ { value: '1', label: '实时视频' }, { value: '2', label: '安全帽检测' }, { value: '3', label: '火苗检测' }, { value: '4', label: '离岗检测' } ], value:'1' , } }, created(){ let that = this window.onresize = function(){ if(!that.checkFull()){ // alert(that.videoclass) // 退出全屏后要执行的动作 console.log("退出全屏") that.fullscreen = false; //alert(that.fornum) for(let n=1;n<=that.fornum;n++){ //alert('videoid'+n) // alert(document.getElementById('videoid'+n)) document.getElementById('videoid'+n).style = "padding-bottom: 40.25%; position: relative; margin: 0px auto;"; } // that.videoclass="padding-bottom: 43.25%; position: relative; margin: 0px auto; overflow: hidden;", //document.getElementById('videoid1').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;"; // document.getElementById('videoid2').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;"; // document.getElementById('videoid3').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;"; //document.getElementById('videoid4').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;"; // that.tableclass="table-c" } else{ for(let n=1;n<=that.fornum;n++){ // alert('videoid'+n) // alert(document.getElementById('videoid'+n)) document.getElementById('videoid'+n).style = "padding-bottom: 52.25%; position: relative; margin: 0px auto;"; } //document.getElementById('videoid1').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;'; //document.getElementById('videoid2').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;'; //document.getElementById('videoid3').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;'; //document.getElementById('videoid4').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;'; } } }, methods:{ //选中 getVideo(index, item){ this.selectedindex=index }, showselect(item1){ this.items=[]; // alert(this.items.length) for(let i=0;i<this.fornum;i++){ if(item1==i){ // alert(item1) this.items[i] = true; }else{ this.items[i]=false; } } }, selecttype(item,fnum,clo) { // alert( this.items[0]) this.items=[]; for(let i=0;i<fnum;i++){ this.items[i]=false; } this.fornum = fnum; this.clonum = clo; if(item==='classtype1'){ this.classtype1='primary' this.classtype2='' this.classtype3='' this.classtype4='' } else if(item==='classtype2'){ this.classtype1='' this.classtype2='primary' this.classtype3='' this.classtype4='' } else if(item==='classtype3'){ this.classtype1='' this.classtype2='' this.classtype3='primary' this.classtype4='' } else if(item==='classtype4'){ this.classtype1='' this.classtype2='' this.classtype3='' this.classtype4='primary' } }, checkFull(){ //判断浏览器是否处于全屏状态 (需要考虑兼容问题) //火狐浏览器 var isFull = document.mozFullScreen|| document.fullScreen || //谷歌浏览器及Webkit内核浏览器 document.webkitIsFullScreen || document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled if(isFull === undefined) { isFull = false } return isFull; }, // 全屏事件 handleFullScreen(){ let element = document.documentElement; let that=this; // alert(this.fullscreen) if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } // alert("ddd") //that.videoclass='padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;'; } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } // this.videoclass=''; // this.tableclass='table-c' //this.tableclass='alt' } this.fullscreen = !this.fullscreen; } } } </script> <style lang="scss"> body { overflow-x: hidden; /* overflow-y: hidden; */ } .main{ padding: 10px; width: auto; height: 100%; .el-row { // margin-bottom: 20px!important; } } html,body{ height:100% ;margin:0; overflow-x: hidden; } .video-wrapper{ height:auto !important; margin:0; padding-bottom: 0.05%!important; position: relative; margin: 0px auto; // position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px; } .alt { // display: grid; // grid-template-columns: repeat(auto-fit, 48%); // grid-template-rows: repeat(2,160px); grid-gap: 10px 10px; // position: absolute; // margin-bottom: 5px!important; // left: 0; // top: 0; // right: 0; // bottom: 0; background: #000; color: #fff; text-align: center; } .altChange { // justify-content:center; // position: absolute; // left: 0; // top: 0; // right: 0; // bottom: 0; // background: #000; border: 2px solid #00A4FF; box-sizing: border-box; color: #fff; // text-align: center; } .alt table{ width: 100%; height: 100%; } .talbetop{ width: 100%; height: 100%; position:relative; .video{ position: relative; display: grid; // grid-template-columns: repeat(auto-fit, 48%); // grid-template-rows: repeat(2,160px); // grid-gap: 10px 10px; width: 100%; height: 3rem; // position: absolute; // left: 0; // top: 0; // right: 0; // bottom: 0; // background: red; z-index: 1000; .aliPlayer{ width: 100%; height: 100%; // margin-bottom: 10px!important; } } .operate{ .close-video{ position: absolute; top:0; right: 0; } .operate-button{ display: flex; justify-content: space-between; position: absolute; bottom: 0; left:0; width: 100%; background: rgba(#eee,0.1); z-index: 1000000; height: 0.4rem; line-height:0.4rem; .button-option{ width: 1.2rem; height: 0.3rem; line-height:0.3rem; .el-input__inner { -webkit-appearance: none; background-color: #FFF; background-image: none; border-radius: 4px; border: 1px solid #DCDFE6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 30px; line-height: 30px; outline: 0; // padding: 0 15px; -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1); transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; } .option-select{ box-sizing: border-box; } } .button-right{ svg{ margin-right: 0.2rem; } } } } } .selectchannel{ position:absolute;right:5px;top:5px; z-index: 10000; } .video-close { // position: absolute; // top: 5px; // right: 5px; color: #fff; font-size: 12px; background-color: hsla(0,0%,50%,.5); padding: 2px 5px; cursor: pointer; border-radius: 2px; max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .table-c table{border-right:2px solid #fff;border-bottom:2px solid #fff;} .table-c table td{border-left:2px solid #fff;border-top:2px solid #fff} /* css 注释: 只对table td设置左与上边框; 对table设置右与下边框; 为了便于截图,我们将css 注释说明换行排版 */ .player-wrapper{ padding-bottom: 5px; } .footer{ background: #000; height: 10%; } </style> ```

【VUE不会呀】Vue 怎么实现一个 SQL 语句配置功能呢

我需要用 Vue 实现一个 SQL 递归的效果,完成 SQL 语句的配置,类似效果图: ![图片说明](https://img-ask.csdn.net/upload/202004/30/1588231701_214553.png)

Vue+iview项目打包后,index.html文件里面修改的内容没有更新

项目框架是Vue+iview的,我需要引入外部js,然后就修改了index.html文件里面的内容,但是打包后的dist包里面的index.html文件还是之前的内容,有大神知道这是什么原因吗? 这是我修改的index.html文件![图片说明](https://img-ask.csdn.net/upload/202002/26/1582716766_950955.png) 这个是我打包后的index.html文件,我添加的jQuery.js并没有更新![图片说明](https://img-ask.csdn.net/upload/202002/26/1582716898_326258.png) 请问是什么原因,感谢!

软件测试入门、SQL、性能测试、测试管理工具

软件测试2小时入门,让您快速了解软件测试基本知识,有系统的了解; SQL一小时,让您快速理解和掌握SQL基本语法 jmeter性能测试 ,让您快速了解主流来源性能测试工具jmeter 测试管理工具-禅道,让您快速学会禅道的使用,学会测试项目、用例、缺陷的管理、

计算机组成原理实验教程

西北工业大学计算机组成原理实验课唐都仪器实验帮助,同实验指导书。分为运算器,存储器,控制器,模型计算机,输入输出系统5个章节

Java 最常见的 200+ 面试题:面试必备

这份面试清单是从我 2015 年做了 TeamLeader 之后开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘在 Java 技术栈中,还有那些知识点是我不知道的,我想找到这些技术盲点,然后修复它,以此来提高自己的技术水平。虽然我是从 2009 年就开始参加编程工作了,但我依旧觉得自己现在要学的东西很多,并且学习这些知识,让我很有成就感和满足感,那所以何乐而不为呢? 说回面试的事,这份面试...

winfrom中嵌套html,跟html的交互

winfrom中嵌套html,跟html的交互,源码就在里面一看就懂,很简单

玩转Python-Python3基础入门

总课时80+,提供源码和相关资料 本课程从Python零基础到纯Python项目实战。内容详细,案例丰富,覆盖了Python知识的方方面面,学完后不仅对Python知识有个系统化的了解,让你从Python小白变编程大牛! 课程包含: 1.python安装 2.变量、数据类型和运算符 3.选择结构 4.循环结构 5.函数和模块 6.文件读写 7.了解面向对象 8.异常处理

程序员的兼职技能课

获取讲师答疑方式: 在付费视频第一节(触摸命令_ALL)片头有二维码及加群流程介绍 限时福利 原价99元,今日仅需39元!购课添加小助手(微信号:itxy41)按提示还可领取价值800元的编程大礼包! 讲师介绍: 苏奕嘉&nbsp;前阿里UC项目工程师 脚本开发平台官方认证满级(六级)开发者。 我将如何教会你通过【定制脚本】赚到你人生的第一桶金? 零基础程序定制脚本开发课程,是完全针对零脚本开发经验的小白而设计,课程内容共分为3大阶段: ①前期将带你掌握Q开发语言和界面交互开发能力; ②中期通过实战来制作有具体需求的定制脚本; ③后期将解锁脚本的更高阶玩法,打通任督二脉; ④应用定制脚本合法赚取额外收入的完整经验分享,带你通过程序定制脚本开发这项副业,赚取到你的第一桶金!

HoloLens2开发入门教程

本课程为HoloLens2开发入门教程,讲解部署开发环境,安装VS2019,Unity版本,Windows SDK,创建Unity项目,讲解如何使用MRTK,编辑器模拟手势交互,打包VS工程并编译部署应用到HoloLens上等。

基于VHDL的16位ALU简易设计

基于VHDL的16位ALU简易设计,可完成基本的加减、带进位加减、或、与等运算。

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

利用Verilog实现数字秒表(基本逻辑设计分频器练习)

设置复位开关。当按下复位开关时,秒表清零并做好计时准备。在任何情况下只要按下复位开关,秒表都要无条件地进行复位操作,即使是在计时过程中也要无条件地进行清零操作。 设置启/停开关。当按下启/停开关后,将

董付国老师Python全栈学习优惠套餐

购买套餐的朋友可以关注微信公众号“Python小屋”,上传付款截图,然后领取董老师任意图书1本。

Python可以这样学(第一季:Python内功修炼)

董付国系列教材《Python程序设计基础》、《Python程序设计(第2版)》、《Python可以这样学》配套视频,讲解Python 3.5.x和3.6.x语法、内置对象用法、选择与循环以及函数设计与使用、lambda表达式用法、字符串与正则表达式应用、面向对象编程、文本文件与二进制文件操作、目录操作与系统运维、异常处理结构。

计算机操作系统 第三版.pdf

计算机操作系统 第三版 本书全面介绍了计算机系统中的一个重要软件——操作系统(OS),本书是第三版,对2001年出版的修订版的各章内容均作了较多的修改,基本上能反映当前操作系统发展的现状,但章节名称基

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

150讲轻松搞定Python网络爬虫

【为什么学爬虫?】 &nbsp; &nbsp; &nbsp; &nbsp;1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到! &nbsp; &nbsp; &nbsp; &nbsp;2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站 【课程设计】 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: 网络请求:模拟浏览器的行为从网上抓取数据。 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 &nbsp; 从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! 【课程服务】 专属付费社群+每周三讨论会+1v1答疑

SEIR课程设计源码与相关城市数据.rar

SEIR结合学报与之前博客结合所做的一些改进,选择其中三个城市进行拟合仿真SEIR结合学报与之前博客结合所做的一些改进,选择其中三个城市进行拟合仿真SEIR结合学报与之前博客结合所做的一些改进,选择其

Python数据挖掘简易入门

&nbsp; &nbsp; &nbsp; &nbsp; 本课程为Python数据挖掘方向的入门课程,课程主要以真实数据为基础,详细介绍数据挖掘入门的流程和使用Python实现pandas与numpy在数据挖掘方向的运用,并深入学习如何运用scikit-learn调用常用的数据挖掘算法解决数据挖掘问题,为进一步深入学习数据挖掘打下扎实的基础。

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

定量遥感中文版 梁顺林著 范闻捷译

这是梁顺林的定量遥感的中文版,由范闻捷等翻译的,是电子版PDF,解决了大家看英文费时费事的问题,希望大家下载看看,一定会有帮助的

GIS程序设计教程 基于ArcGIS Engine的C#开发实例

张丰,杜震洪,刘仁义编著.GIS程序设计教程 基于ArcGIS Engine的C#开发实例.浙江大学出版社,2012.05

人工智能-计算机视觉实战之路(必备算法+深度学习+项目实战)

系列课程主要分为3大阶段:(1)首先掌握计算机视觉必备算法原理,结合Opencv进行学习与练手,通过实际视项目进行案例应用展示。(2)进军当下最火的深度学习进行视觉任务实战,掌握深度学习中必备算法原理与网络模型架构。(3)结合经典深度学习框架与实战项目进行实战,基于真实数据集展开业务分析与建模实战。整体风格通俗易懂,项目驱动学习与就业面试。 建议同学们按照下列顺序来进行学习:1.Python入门视频课程 2.Opencv计算机视觉实战(Python版) 3.深度学习框架-PyTorch实战/人工智能框架实战精讲:Keras项目 4.Python-深度学习-物体检测实战 5.后续实战课程按照自己喜好选择就可以

三个项目玩转深度学习(附1G源码)

从事大数据与人工智能开发与实践约十年,钱老师亲自见证了大数据行业的发展与人工智能的从冷到热。事实证明,计算机技术的发展,算力突破,海量数据,机器人技术等,开启了第四次工业革命的序章。深度学习图像分类一直是人工智能的经典任务,是智慧零售、安防、无人驾驶等机器视觉应用领域的核心技术之一,掌握图像分类技术是机器视觉学习的重中之重。针对现有线上学习的特点与实际需求,我们开发了人工智能案例实战系列课程。打造:以项目案例实践为驱动的课程学习方式,覆盖了智能零售,智慧交通等常见领域,通过基础学习、项目案例实践、社群答疑,三维立体的方式,打造最好的学习效果。

微信小程序开发实战之番茄时钟开发

微信小程序番茄时钟视频教程,本课程将带着各位学员开发一个小程序初级实战类项目,针对只看过官方文档而又无从下手的开发者来说,可以作为一个较好的练手项目,对于有小程序开发经验的开发者而言,可以更好加深对小程序各类组件和API 的理解,为更深层次高难度的项目做铺垫。

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

去除异常值matlab程序

数据预处理中去除异常值的程序,matlab写成

用verilog HDL语言编写的秒表

在秒表设计中,分模块书写。用在七段数码管上显示。输入频率是1KHZ.可以显示百分秒,秒,分。如要显示小时,只需修改leds里的代码和主模块代码。改程序以通过硬件电路验证。完全正确。

[透视java——反编译、修补和逆向工程技术]源代码

源代码。

相关热词 c# dbml文件 修改 c#遍历tree c# 能够控制单片机 c#对象写入数据库 c# 添加activex c#2005 json c# 数据库在云端 c# 字符串移位加密 c#禁用滚轮 c#实体类list去重复
立即提问