Vue中v-for渲染数据时,如何获取相同的数据?需要来比较这两条数据的值,然后做其他操作。

如果渲染出来的数据有相同的,然后又被勾选了的情况下,会有alert弹窗提醒,“不能选择相同的”

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue用v-for循环渲染数组数据,数组数据更新时,视图没有更新

Vue用v-for循环渲染数组数据,数组数据更新时,视图没有更新,filter,和变异方法都试过了,好像都不行,看网上有说是重复实例化vue的原因,但是不太明白。 ![图片说明](https://img-ask.csdn.net/upload/201709/07/1504762347_121687.png) html是这样的 ![图片说明](https://img-ask.csdn.net/upload/201709/07/1504751164_800070.png) 要实现的是,点击触发but()方法,然后ajax获取数据,用v-for循环渲染出来。现在的问题是,第一次拿到数据可以正常渲染,当第二次触发方法时,ajax重新获取到新数据,vue中的data也已经改变了,但是页面上没改变。没弄懂怎么回事。

v-for求思路!!!服务器请求来的数据渲染到DOM中去

**老问题** vue中: 1. 用ul-li来展示获取的数据,有图片,有文字 2. 可不可以只写1个li, 然后复用 3. 怎么使用v-for实现一 一对应,图片对图片,标题对标题,内容对内容 4. 如下是我获取数据的时候类似于data[0][title],所以都是重复的,不会同时展示第二条第三条。。。的title或者图片 ![图片说明](https://img-ask.csdn.net/upload/201902/26/1551126957_934479.png) **新问题:图片不显示:服务器格式如下,以及我提取那个URL,路过的请帮我看看什么问题,还有ul-li代码也截了,该怎么用v-for把图片弄上去 ![图片说明](https://img-ask.csdn.net/upload/201902/26/1551131149_931679.png) ** ![图片说明](https://img-ask.csdn.net/upload/201902/26/1551131258_883244.png) ![图片说明](https://img-ask.csdn.net/upload/201902/26/1551131508_493674.png) ![图片说明](https://img-ask.csdn.net/upload/201902/26/1551131883_379191.png)

vue 使用v-for循环输出图标

### 使用v-for循环出一排七个不同的图标 ``` <el-row> <el-col :span="3" v-for="(index,item) in 7" style="text-align:center"> <svg-icon icon-class="user" ></svg-icon> </el-col> </el-row> ``` ####大致代码这个样子的,但是不太懂数据绑定啥的,求大神指点一下萌新

vue中,如何根据坐标给v-for渲染出来的表格添加样式

![图片说明](https://img-ask.csdn.net/upload/202002/14/1581666673_768340.png) <br> 比如说后台数据返回的是(1,A),状态为已入库,那我该如何将获取到的坐标对应图片的坐标,然后将图片li对应坐标的颜色改为已入库对应的绿色 <br> 表格代码如下: ``` <table class="table-container am-active"> <tbody class="table-body-container" v-if="rows > 0 && columns > 0"> <tr v-for="rowidx in rows" :key="rowidx"> <td v-for="columnidx in columns" :key="columnidx" class="container-detail-td"> <div class="table-sample-big" @click="selfcllick(rows+1-rowidx,columnidx)"></div> </td> </tr> </tbody> </table> ```

web端以表格方式供用户输入数据,通过vue的v-model获取数据,现在获取的是表格的name为key,输入值为value的json数据,但是我需要第一列为key,第二列为value,该如何处理?

![图片说明](https://img-ask.csdn.net/upload/202004/13/1586763491_287825.jpg) 第一个问题: 目前我使用的是vue框架,通过v-model获取到的参数是{key1=name,value1=aa},但是我想要的是{name=aa}这种形式。 第二个问题: 我的表格默认只有一行,其他行是我动态添加的,添加的时候是通过 ``` td_1.innerHTML = "<input type='text' name='parm" + rowNums + "key' class='kv' v-model='formData.reqMap.parm" + rowNums + "k'/>"; td_2.innerHTML = "<input type='text' name='parm" + rowNums + "value' class='kv' v-model='formData.reqMap.parm" + rowNums + "v'/>"; ``` 相当于拼字符串形式添加的,也拼接了属性。但是目前获取参数的时候只能获取到第一行,其他添加出来的行的数据获不到。 希望大神帮忙指点一二,不知道我的描述是否清晰。

vue里用v-for循环出来的图片在:style重新赋值backgroundPosition的值

<li v-for="(item, index) in demoList" :key="index"> <span :style="{backgroundImage: 'url(' + item.bgImg+ ')', backgroundPositionX: index*-32 + 'px', backgroundPositionY: index*-32 + 'px'}"></span> </li> 上面这个图片循环出来后关于计算定位的问题,每循环出来一个图片我就要通过下标值就要给(backgroundPositionX)重新赋予一个没有规律的值,请问这个怎么做

在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 如何在一个标签的v-for里 循环多个后端返回的json ?

![图片说明](https://img-ask.csdn.net/upload/201906/06/1559787856_912343.png) 我想要在这个标签里再次循环第二个ajax返回的item对象 该怎么写能让![图片说明](https://img-ask.csdn.net/upload/201906/06/1559787993_199902.png) 这样的循环正常显示

vue-awesome-swiper 手势缩放无效

问题描述: 想在vue项目中使用vue-awesome-swiper实现相册查看功能,测试的时候发现使用写死的图片src 时手势缩放没有问题,但是图片src集合换到从后台获取到再赋值的,手势缩放就不起作用了,不知道是什么原因。 用的vue template, 后台获取到的数据已经渲染到dom中,手机上测试切换没有问题,双击放大也可以,就是手势缩放或者双击放大后图片不能拖拽移动查看(用写死的图片src是可以的)。 vue项目依赖或版本: ``` "devDependencies": { "axios": "^0.15.3", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.12.1", "less": "^2.7.3", "less-loader": "^4.0.5", "lodash": "^4.17.4", "postcss-px2rem": "^0.3.0", "vue-lazyload": "^1.2.6" }, "dependencies": { "fastclick": "^1.0.6", "leancloud-realtime": "^4.0.0-alpha.3", "leancloud-realtime-plugin-typed-messages": "^3.0.0", "leancloud-storage": "^3.4.2", "mint-ui": "^2.2.11", "moment": "^2.19.1", "vee-validate": "^2.0.0", "vue": "^2.5.13", "vue-awesome-swiper": "^2.6.7", "vue-resource": "^1.3.4", "vue-router": "^3.0.1", "vuex": "^3.0.1" } ``` 问题出现的环境背景及自己尝试过哪些方法: 试过使用另一个图片预览插件 [PhotoSwipe](http://photoswipe.com/ ""):PhotoSwipe,这个插件体验感比较好,但是插件需要预先知道图片的宽高,这个目前还没有时间研究。 相关代码: ``` <style> .viewImg .swiper-slide img { width: 100%; } </style> <template> <div class="viewImg" > <a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="img in images" :key="img.id"> <div class="swiper-zoom-container"> <img :data-src="img.smallSizeUrl" class="swiper-lazy"> </div> </swiper-slide> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> import 'swiper/dist/css/swiper.css' ; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return {swiperOption: { allowTouchMove: true, width: window.innerWidth, notNextTick: false, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper loadPrevNext: true, lazy: { loadPrevNext: true, }, lazyLoading : true, lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。 zoom: true, grabCursor: true, // 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同) pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 // this.swiper.slideTo(0, 1, false); }, props: { images: { required: true } }, methods:{ closeViewer: function(){ this.viewImg = false; } } } </script> ``` 我期待的结果是什么?实际看到的错误信息又是什么: 需要实现流畅的相册查看功能,支持预加载、流畅切换以及手机中手势缩放查看。 [vue-awesome-swiper 的demo](https://surmon-china.github.io/vue-awesome-swiper/ "")里可以看到都可以满足目前的主要需求,但是我在项目中出现了以上问题,求助。

解決vue-element-admin mock 模擬數據不顯示問題(已經解決)

``` const List = [] const count = 100 for (let i = 0; i < count; i++) { List.push(Mock.mock({ id: '@id', title: '@sentence(10, 20)', 'status|1': ['published', 'draft', 'deleted'], author: 'name', category: 'MT-@integer(1,1000)', createdate: '@date', number: 'MT-@integer(10, 100)', opeater: 'simon@integer(500,800)', amount: '$@integer(500,5000)', type: 'MF-@sentence(10, 20)', name: 'MA-@sentence(1, 20)', qutodate: '@date' })) } export default [ { url: '/table/list', type: 'get', response: config => { const { importance, type, title, page = 1, limit = 20 ,sort} = config.query let mockList = List.filter(item => { if(importance && item.importance !== +importance) return false if(type && item.type !== type) return false if(title && item.title.indexOf(title) < 0) return false return true }) if (sort === '-id') { mockList = mockList.reverse() } const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page -1)) return { code: 20000, data: { total: mockList.length, items: pageList } } } }, ``` ``` <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px" > <el-table-column align="center" label="ID" width="85" prop="id" :class-name="getSortClass('id')"> <template slot-scope="row"> {{ row.id }} </template> </el-table-column> <el-table-column align="center" label="類別" prop="category"> <template slot-scope="{row}"> {{ row.category }} </template> </el-table-column> </el-table> created() { this.fetchData() }, methods: { fetchData() { this.listLoading = true getList(this.listQuery).then(response => { this.list = response.data.items this.total = response.data.total console.log(this.list) setTimeout(() => { this.listLoading = false }, 1000) }) } } ``` 沒有數據顯示 請問各位大神知道什麼原因嘛

vue父组件获取子组件数据对象

我想在父组件上获取排子组件数据对象 ``` <ct-select v-model="text" @getSearchName="getName"> <ct-option v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> </ct-option> </ct-select> ``` 在父组件`ct-select`里的`mounted`下用`this.$slots.default` 获取为`undefined`,因为`dataList`是异步获取到的 ``` //ct-select export default { mounted() { console.log(this.$slots.default) //undefined } } ``` 有什么办法可以在异步的情况下在`mounted`里能获取到子组件上的数据对象??

关于el-table无法渲染的问题,求大佬指教

* 从ElementUI的官网新建了VUE组件,使用这段代码 ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="150"> </el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> </el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } } } </script> ``` * * * * * * * * * * * * * * * * * * router里的index文件 ``` import Vue from 'vue' import Router from 'vue-router' import NewFile from '@/components/NewFile' Vue.use(Router) export default new Router({ routes: [ { path: '/NewFile', components: { newfile: NewFile, } } ] }) ``` src下的App.vue和Main.js文件 ``` <template> <div class="container" id="vueApp"> <router-view name="newfile"></router-view> </div> </template> <script> export default { } </script> <style> </style> ``` ``` import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import Table from 'element-ui'; import App from './App' import router from './router' import store from './store' import 'babel-polyfill' Vue.config.productionTip = false Vue.use(ElementUI); Vue.use(Table); /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App), router, store, components: { App }, template: '<App/>' }) ``` package.json里的依赖: ``` "dependencies": { "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "element-ui": "^2.13.0", "express": "^4.17.1", "mysql": "^2.17.1", "vue": "^2.5.2", "vue-axios": "^2.1.5", "vue-router": "^3.0.1", "vuex": "^3.1.2" } ``` 单独新建一个VUE项目可以运行,但是在原有这个项目运行无法渲染页面,并弹出以下问题,不知道有无相关 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578300263_899632.png) ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578299380_894423.png) 另外elementUI的其他组件,比如el-form和el-dialog,做登录页时也是单独项目可渲染,但是在这个项目里无法渲染,但是也没有相关报错,求大佬指教

vue中echarts通过axios获取到数据,但是前端页面图却显示不出来!

``` export default { data() { return { colors: [ "#f7797d", "#2C5364", "#40E0D0", "#12c2e9", "#1565C0", "#6b6b83", "#11998e", "#c94b4b", "#00b09b", "#CAC531" ], }; }, mounted() { this.drawChart(); }, methods: { //画图 drawChart() { //建立series1数组,用于存放遍历的series的数据配置信息 var series1 = []; var myChart = this.$echarts.init(document.getElementById("container")); let _that = this; //指定图表的配置项和数据 var option = { color: this.colors, legend: { show: true, orient: "vertical", right: 15, top: 35, itemGap: 30, textStyle: { //图例文字的样式 fontSize: 20 } }, grid: { height: 720, width: 1220, top: 40 }, xAxis: { type: "time", axisLine: { show: true }, axisLabel: { rotate: -11, margin: 20, fontWeight: "bold", fontSize: 14 } }, yAxis: [ { splitLine: { //网格线 lineStyle: { type: "solid" //设置网格线类型 }, show: true //隐藏或显示 }, axisLabel: { fontWeight: "bold", fontSize: 16 }, data: [ "2#回火炉", "1#回火炉", "2#冷水机", "1#清洗机", "4#加热炉", "3#加热炉", "2#加热炉", "1#加热炉" ] } ], //将配置信息数组,赋给series series: series1 }; //加载数据图表 //第二个参数为true的原因是防止多次请求造成数据错乱 //true:覆盖掉之前的配置信息 myChart.setOption(option, true); //显示等待画面 myChart.showLoading(); // 接收后端发送过来的数据 this.$axios({ method: "get", url: "/api/productiton" }) .then(res => { var result = res.data; //隐藏加载动画 myChart.hideLoading(); //循环series内的数据 for (var i = 0; i < result.length; i++) { series1.push({ type: "custom", name: result[i].name, renderItem: function(params, api) { var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6; var rectShape = echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ); return ( rectShape && { type: "rect", shape: _that.$echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ), style: api.style() } ); }, itemStyle: { opacity: 1 }, encode: { x: [1, 2], y: 0 }, data: result[i].equipment }); } }) .catch(error => { console.log(error); }); //清空数组,避免多次请求,数据重复添加 series1 = []; } } }; ```

vue.js api请求成功,列表50条数据分页偶尔渲染不出来,有遇到的吗

经排查,不是vue.js 的问题,是有新内容的时候,输出json之前多了个调试的输出。 vue.js api请求成功,列表50条数据分页偶尔渲染不出来,有遇到的吗 偶尔会发生v-for下的内容空白,api 返回json 数据正确 无报错信息 代码 <template> <div class="row"> <div class="col-12 col-sm-12 col-md-9"> <div class="row" id="home-videos-list"> <template v-for="(video, key) in videos"> <div class="col-6 col-sm-6 col-md-4 p-2" :id="'video-list-'+key"> <div class="card"> <a :href="video.url" v-on:mouseenter="startPlay('video-item-'+video.id)" v-on:mouseleave="stopPlay('video-item-'+video.id)"> <img v-lazy="video.thumb" :class="'video-item-'+video.id" style="display:block"> <video :id="'video-item-'+video.id" class="video-js vjs-fluid vjs-big-play-centered vjs-default-skin" :poster="video.thumb" :preload="'none'" :controls="false" :loop="true" :muted="true" :autoplay="false" :aspectRatio="'16:9'" sourceOrder="true" style="display:none"> <source :src="video.video" :type="video.type"></source> </video> <div class="card-body p-1 text-center"> <p class="card-text text-dark two-line"><span class="badge badge-secondary">{{ Math.ceil(video.play_time / 60) }}Min</span>{{ video.title }}</p> </div> </a> </div> </div> </template> <div class="col-12 col-sm-12 col-md-12"> <paginate :current_page="current_page" :to="to" :total="total" :last_page="last_page" :from="from" :lang="lang" :with_url="with_url"></paginate> </div> </div> </div> <div class="col-12 col-sm-12 col-md-3" id="auto-play"> <japaness-list></japaness-list> </div> </div> </template> <style> </style> <script> import paginate from './paginate' import Video from 'video.js' import 'video.js/dist/video-js.css' export default { data (){ return { videos: [], current_page: '', to: '', total: '', last_page: '', from: '', with_url: '', lang: '', num: 0, num_total: 0, num_limit: 10, data_videos: [] } }, components: { 'paginate': paginate, Video }, computed: { }, created:function(){ this.getVideos(); }, mounted (){ window.addEventListener('scroll',this.handleScroll,true);//监听shu标事件,再渲染另40条 }, methods:{ getVideos () { axios.get('/api/videos/list?offset=50&locale='+locale+'&page='+page+'&keyword='+keyword).then(response => { if(response.data.status){ this.lang = response.data.local; let result = response.data.data; let Seo = response.data; this.json_ld = Seo.json_ld; document.querySelector('title').innerHTML = Seo.title; document.getElementById('json_ld').innerHTML = Seo.json_ld; document.querySelector('meta[name=keywords]').setAttribute('content', Seo.keywords); document.querySelector('meta[name=description]').setAttribute('content', Seo.description); let videos = result.data; this.data_videos = videos; this.videos = videos.slice(this.num * this.num_limit, (this.num + 1) * this.num_limit);//分段,每次渲染10条 this.num_total = videos.length; this.current_page = result.current_page; this.to = result.to; this.total = result.total; this.last_page = result.last_page; this.from = result.from; this.with_url = response.data.with_url; let _this=this setTimeout(function(){//在超大屏幕下没有滚动条,1秒后自动渲染 _this.num++; if(_this.num * _this.num_limit > _this.num_total){ return false; } _this.videos = _this.videos.concat(_this.data_videos.slice(_this.num * _this.num_limit, (_this.num + 1) * _this.num_limit)); }, 1000); } }); }, startPlay(id){ Video(id, {}, function onPlayerReady() { this.play(); document.getElementById(id).style.display = 'block'; document.getElementById(id+'_html5_api').style.display = 'block'; document.querySelector('img[class='+id+']').style.display = 'none'; }) }, stopPlay(id){ Video(id, {}, function onPlayerReady() { this.pause(); document.getElementById(id).style.display = 'none'; document.getElementById(id+'_html5_api').style.display = 'none'; document.querySelector('img[class='+id+']').style.display = 'block'; }) }, handleScroll(){ this.num++; if(this.num * this.num_limit > this.num_total){ return false; } this.videos = this.videos.concat(this.data_videos.slice(this.num * this.num_limit, (this.num + 1) * this.num_limit)); } } } </script>

vue中data的数据在前台页面显示乱码(中文和数字都是乱码)

vue中data的数据在前台页面显示乱码(中文和数字都是乱码) 以下是代码: ``` Vue.component('yszd-background', { props: { data: { type: Object, default: getYszdJcxx() }, anlb: { type: Array, default: [] }, guohui:{ type:Object, default:{dj:function(){}} }, methods:{ default:function(){ console.log("0"); console.log("1"+this.title); console.log("2"+this.default.title); console.log("3"+this); } }, timecontrol:{ type:Object, default:{ time:180, operation:function(){ goSyurl(); }, openflg:false } } }, created:function(){ if(this.timecontrol!=null && this.timecontrol.openflg){ var vue_this=this; var rsTime=this.timecontrol.time; this.timecontrol.resettime=rsTime; var timeInterval=setInterval(function(){ console.log("执行倒计时时间开始!"+vue_this.timecontrol.time); if(vue_this.timecontrol.time<=0){ console.log("倒计时结束:"+vue_this.timecontrol.time); //alert("openflg:"+vue_this.timecontrol.openflg); vue_this.timecontrol.operation(); }else{ vue_this.timecontrol.time--; } }, 1000); } }, methods:{ resetTime:function(){ if(this.timecontrol!=null && this.timecontrol.openflg){ console.log("开始重置时间:"+this.timecontrol.resettime); this.timecontrol.time=this.timecontrol.resettime; } } } , template: '<div class="comm-background" @click="resetTime()"> <div class="comm-head">' + ' <el-row style="padding-top:10px;"> <el-col :span="2">' + ' <div class="comm-head-imgcss" @click="guohui.dj"></div>' + ' </el-col>' + ' <el-col style="text-align:left;" :span="17">' + ' <h1 class="title-cn">{{data.title}}</h1>' + ' </el-col>' + ' <el-col :span="3" v-if="timecontrol.openflg"><div class="comm-head-djsimg"></div></el-col>'+ ' <el-col :span="2" v-if="timecontrol.openflg"><p class="comm-head-djsdiv">{{timecontrol.time}}</p></el-col>'+ ' </el-row></div>' + ' <div class="comm-body">' + ' <slot></slot>' + ' </div>' + ' <div class="comm-tool-btndiv">' + ' <el-button v-for="item in anlb" @click="item.dj" class="comm-btn-css comm-btn-red" v-bind:class="item.cn">{{item.mc}}</el-button>' + ' </div>' + // ' <div class="comm-foot">' + ' <el-row class="comm-foot"> <el-col :span="12">' + ' <div class="comm-foot-sbxxdiv"><span>设备编码:</span>' + ' <span>{{data.tamid}}</span> </div>' + ' </el-col>' + ' <el-col :span="12">' + ' <div class="comm-foot-kfxxdiv"><span v-show="data.xskfrx" >服务电话:</span>' + ' <span v-show="data.xskfrx" >{{data.kfxx}}</span>' + ' </el-col></div> </el-row>' + // ' </div>'+ '</div>' }); /** * 获取终端界面背景信息 * @returns */ function getYszdJcxx(){ var yszdJcxx = getQueryString('yszdJcxx'); if(!yszdJcxx){ yszdJcxx = sessionStorage.getItem("yszdJcxx"); console.log(1); } if(!yszdJcxx) { return {title:"自助办税服务终端",tamid:"AISINO00001",xskfrx:false,kfxx:"95113"}; console.log(2); } return jQuery.parseJSON(yszdJcxx); console.log("3"+yszdJcxx); } ``` 页面的显示是 ![图片说明](https://img-ask.csdn.net/upload/201910/12/1570877301_621263.png) 求大佬帮忙

vue + elementui 中el-table-column 下的json显示问题

![图片说明](https://img-ask.csdn.net/upload/201907/30/1564466915_2724.png) ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564466823_14929.png) 各位大佬,怎么解析 {{scope.row.json}} 里面的json啊,不显示json字符串,解析后显示表单。

vue中data的数据在前台页面显示乱码

vue中前台页面出现乱码(中文,数字都是乱码) ![图片说明](https://img-ask.csdn.net/upload/201910/12/1570847367_838760.png) 代码: ``` Vue.component('yszd-background', { props: { data: { type: Object, default: getYszdJcxx() }, anlb: { type: Array, default: [] }, guohui:{ type:Object, default:{dj:function(){}} }, methods:{ default:function(){ console.log("0"); console.log("1"+this.title); console.log("2"+this.default.title); console.log("3"+this); } }, timecontrol:{ type:Object, default:{ time:180, operation:function(){ goSyurl(); }, openflg:false } } }, created:function(){ if(this.timecontrol!=null && this.timecontrol.openflg){ var vue_this=this; var rsTime=this.timecontrol.time; this.timecontrol.resettime=rsTime; var timeInterval=setInterval(function(){ console.log("执行倒计时时间开始!"+vue_this.timecontrol.time); if(vue_this.timecontrol.time<=0){ console.log("倒计时结束:"+vue_this.timecontrol.time); //alert("openflg:"+vue_this.timecontrol.openflg); vue_this.timecontrol.operation(); }else{ vue_this.timecontrol.time--; } }, 1000); } }, methods:{ resetTime:function(){ if(this.timecontrol!=null && this.timecontrol.openflg){ console.log("开始重置时间:"+this.timecontrol.resettime); this.timecontrol.time=this.timecontrol.resettime; } } } , template: '<div class="comm-background" @click="resetTime()"> <div class="comm-head">' + ' <el-row style="padding-top:10px;"> <el-col :span="2">' + ' <div class="comm-head-imgcss" @click="guohui.dj"></div>' + ' </el-col>' + ' <el-col style="text-align:left;" :span="17">' + ' <h1 class="title-cn">{{data.title}}</h1>' + ' </el-col>' + ' <el-col :span="3" v-if="timecontrol.openflg"><div class="comm-head-djsimg"></div></el-col>'+ ' <el-col :span="2" v-if="timecontrol.openflg"><p class="comm-head-djsdiv">{{timecontrol.time}}</p></el-col>'+ ' </el-row></div>' + ' <div class="comm-body">' + ' <slot></slot>' + ' </div>' + ' <div class="comm-tool-btndiv">' + ' <el-button v-for="item in anlb" @click="item.dj" class="comm-btn-css comm-btn-red" v-bind:class="item.cn">{{item.mc}}</el-button>' + ' </div>' + // ' <div class="comm-foot">' + ' <el-row class="comm-foot"> <el-col :span="12">' + ' <div class="comm-foot-sbxxdiv"><span>设备编码:</span>' + ' <span>{{data.tamid}}</span> </div>' + ' </el-col>' + ' <el-col :span="12">' + ' <div class="comm-foot-kfxxdiv"><span v-show="data.xskfrx" >服务电话:</span>' + ' <span v-show="data.xskfrx" >{{data.kfxx}}</span>' + ' </el-col></div> </el-row>' + // ' </div>'+ '</div>' }); function getYszdJcxx(){ var yszdJcxx = getQueryString('yszdJcxx'); if(!yszdJcxx){ yszdJcxx = sessionStorage.getItem("yszdJcxx"); console.log(1); } if(!yszdJcxx) { return {title:"自助办税服务终端",tamid:"AISINO00001",xskfrx:false,kfxx:"95113"}; console.log(2); } return jQuery.parseJSON(yszdJcxx); console.log("3"+yszdJcxx); } ```

vue+elementUI表格数据修改,表格消失

新人学习vue+elementUI的时候,做一个简单的增删改查,每次表格里data的数据改了,之前的表格就会消失,麻烦路过大佬给看一下问题 ``` <div id="test"> <div> <el-table id="tab" :data="data.filter(data => !search || data.Name.toLowerCase().includes(search .toLowerCase()))" style="width: 100%"> <el-table-column label="姓名" prop="Name" width="180"></el-table-column> <el-table-column label="年龄" prop="Age" width="180"></el-table-column> <el-table-column label="毕业学校" prop="School" width="180"></el-table-column> <el-table-column label="备注" prop="Remark" width="180"></el-table-column> <el-table-column align="right"> <template slot="header" slot-scope="scope"> <el-input v-model="search " size="180" placeholder="输入姓名进行搜索"/> </template> <template slot-scope="scope"> <el-button type="success" @click="Edit(scope.row)">编辑</el-button><el-button @click="Delete(scope.row.Id)">删除</el-button> </template> </el-table-column> </el-table> </div> </div> <div id="row"> <div> <el-input v-model="savData.Name" placeholder="姓名"/> </div> <div> <el-input v-model="savData.Age" placeholder="年龄"/> </div> <div> <el-select v-model="savData.School"> <el-option label="杨村第一小学" value="杨村第一小学"></el-option> <el-option label="杨村第二小学" value="杨村第二小学"></el-option> <el-option label="杨村第三小学" value="杨村第三小学"></el-option> </el-select> </div> <div> <el-input v-model="savData.Remark" placeholder="备注"/> </div> <div> <el-button type="success" @click="Save">保存</el-button> </div> </div> var vue = new Vue({ el: '#test', data: data, methods: {//监听方法 Change:function(){ console.log(this.data) }, Delete: function (id) { console.log(id) for (var i=0;i<this.data.length;i++){ if (this.data[i].Id == id) { this.data.splice(i, 1);//从哪个数据开始到之后几条数据删除 this.rowsSave.splice(i,1); break; } } }, Edit: function (row) { console.log(3) rowSadta.savData = row; }, //上一页方法 PrePage: function (event) { console.log(4) $(".pagination .active").prev().trigger("click"); }, //下一页方法 NextPage: function (event) { console.log(5) $(".pagination .active").next().trigger("click"); }, //点击页码的方法 NumPage: function (num, event) { console.log(6) if (this.curpage == num) { return; } this.curpage = num; $(".pagination li").removeClass("active"); if (event.target.tagName.toUpperCase() == "LI") { $(event.target).addClass("active"); } else { $(event.target).parent().addClass("active"); } if (this.curpage == 1) { $("#prepage").addClass("disabled"); } else { $("#prepage").removeClass("disabled"); } if (this.curpage == Math.ceil(this.data.length / this.pagesize)) { $("#nextpage").addClass("disabled"); } else { $("#nextpage").removeClass("disabled"); } }, } }); ```

Vue 中的三级联动问题?

<select > <option>---请选择---</option> <option v-for="(p,i) in pList" :key="i">{{a.name}}</option> </select> .... const addressApp = new Vue({ .... data:{ pList:[],//省列表 cList:[],//市列表 aList:[]//区列表 } .... }); 备注:aList是后台异步请求获取的值, 格式为:[ {name:"河北省",provinceId:"1001"}, {name:"河南省",provinceId:"1002"}, ... ] 需求: 当选中下拉框中的某个选项时,如何获取这个选项的provinceId,通过什么事件 并向后台发起一个异步的请求,通过provinceId,获取城市的列表 (option绑定单击事件并传递对象无法触发!)

Python数据挖掘简易入门

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

HoloLens2开发入门教程

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

2019 Python开发者日-培训

本次活动将秉承“只讲技术,拒绝空谈”的理念,邀请十余位身处一线的Python技术专家,重点围绕Web开发、自动化运维、数据分析、人工智能等技术模块,分享真实生产环境中使用Python应对IT挑战的真知灼见。此外,针对不同层次的开发者,大会还安排了深度培训实操环节,为开发者们带来更多深度实战的机会。

Only老K说-爬取妹子图片(简单入门)

安装第三方请求库 requests 被网站禁止了访问 原因是我们是Python过来的 重新给一段 可能还是存在用不了,使用网页的 编写代码 上面注意看匹配内容 User-Agent:请求对象 AppleWebKit:请求内核 Chrome浏览器 //请求网页 import requests import re //正则表达式 就是去不规则的网页里面提取有规律的信息 headers = { 'User-Agent':'存放浏览器里面的' } response = requests.get

2020_五一数学建模_C题_整理后的数据.zip

该数据是我的程序读取的数据,仅供参考,问题的解决方案:https://blog.csdn.net/qq_41228463/article/details/105993051

R语言入门基础

本课程旨在帮助学习者快速入门R语言: 课程系统详细地介绍了使用R语言进行数据处理的基本思路和方法。 课程能够帮助初学者快速入门数据处理。 课程通过大量的案例详细地介绍了如何使用R语言进行数据分析和处理 课程操作实际案例教学,通过编写代码演示R语言的基本使用方法和技巧

人才招聘系统PHP+MySQL源码

PHP 5.0及以上 + MySQL 5.0及以上 开发的人才招聘系统完全可运行源码,按照操作说明简单配置即可运行。学习PHPWEB应用的完整系统程序源码。

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

python可视化分析(matplotlib、seaborn、ggplot2)

python可视化分析总结(matplotlib、seaborn、ggplot)一、matplotlib库1、基本绘图命令3、图形参数设置4、特殊统计图的绘制4.1 数学函数图4.2 气泡图4.1 三维曲面图二、seaborn库1、常用统计图1.1 箱线图1.2 小提琴图1.3 点图1.4 条图与计数图1.5 分组图1.6 概率分布图2、联合图3、配对图三、ggplot库1、图层画法+常用图形2、快速绘图 一、matplotlib库 1、基本绘图命令 import matplotlib.pyplot as

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

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

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

课程主要面向嵌入式Linux初学者、工程师、学生 主要从一下几方面进行讲解: 1.linux学习路线、基本命令、高级命令 2.shell、vi及vim入门讲解 3.软件安装下载、NFS、Samba、FTP等服务器配置及使用

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

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

【大总结2】大学两年,写了这篇几十万字的干货总结

本文十天后设置为粉丝可见,喜欢的提前关注 不要白嫖请点赞 不要白嫖请点赞 不要白嫖请点赞 文中提到的书我都有电子版,可以评论邮箱发给你。 文中提到的书我都有电子版,可以评论邮箱发给你。 文中提到的书我都有电子版,可以评论邮箱发给你。 本篇文章应该算是Java后端开发技术栈的,但是大部分是基础知识,所以我觉得对任何方向都是有用的。 1、数据结构 数据结构是计算机存储、...

lena全身原图(非256*256版本,而是全身原图)

lena全身原图(非256*256版本,而是全身原图) lena原图很有意思,我们通常所用的256*256图片是在lena原图上截取了头部部分的256*256正方形得到的. 原图是花花公子杂志上的一个

【项目实战】 图书信息管理系统(Maven,mybatis)(第一个自己独立完成的项目)

《程序设计综合训练实践报告》 此项目为图书信息管理系统,是一个采用了mysql+mybatis框架+java编写的maven项目

图书管理系统(Java + Mysql)我的第一个完全自己做的实训项目

图书管理系统 Java + MySQL 完整实训代码,MVC三层架构组织,包含所有用到的图片资源以及数据库文件,大三上学期实训,注释很详细,按照阿里巴巴Java编程规范编写

Python入门视频精讲

Python入门视频培训课程以通俗易懂的方式讲解Python核心技术,Python基础,Python入门。适合初学者的教程,让你少走弯路! 课程内容包括:1.Python简介和安装 、2.第一个Python程序、PyCharm的使用 、3.Python基础、4.函数、5.高级特性、6.面向对象、7.模块、8.异常处理和IO操作、9.访问数据库MySQL。教学全程采用笔记+代码案例的形式讲解,通俗易懂!!!

20行代码教你用python给证件照换底色

20行代码教你用python给证件照换底色

2018年全国大学生计算机技能应用大赛决赛 大题

2018年全国大学生计算机技能应用大赛决赛大题,程序填空和程序设计(侵删)

MySQL数据库从入门到实战应用

限时福利1:购课进答疑群专享柳峰(刘运强)老师答疑服务 限时福利2:购课后添加学习助手(微信号:csdn590),按消息提示即可领取编程大礼包! 为什么说每一个程序员都应该学习MySQL? 根据《2019-2020年中国开发者调查报告》显示,超83%的开发者都在使用MySQL数据库。 使用量大同时,掌握MySQL早已是运维、DBA的必备技能,甚至部分IT开发岗位也要求对数据库使用和原理有深入的了解和掌握。 学习编程,你可能会犹豫选择 C++ 还是 Java;入门数据科学,你可能会纠结于选择 Python 还是 R;但无论如何, MySQL 都是 IT 从业人员不可或缺的技能! 【课程设计】 在本课程中,刘运强老师会结合自己十多年来对MySQL的心得体会,通过课程给你分享一条高效的MySQL入门捷径,让学员少走弯路,彻底搞懂MySQL。 本课程包含3大模块:&nbsp; 一、基础篇: 主要以最新的MySQL8.0安装为例帮助学员解决安装与配置MySQL的问题,并对MySQL8.0的新特性做一定介绍,为后续的课程展开做好环境部署。 二、SQL语言篇: 本篇主要讲解SQL语言的四大部分数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL,学会熟练对库表进行增删改查等必备技能。 三、MySQL进阶篇: 本篇可以帮助学员更加高效的管理线上的MySQL数据库;具备MySQL的日常运维能力,语句调优、备份恢复等思路。 &nbsp;

C/C++学习指南全套教程

C/C++学习的全套教程,从基本语法,基本原理,到界面开发、网络开发、Linux开发、安全算法,应用尽用。由毕业于清华大学的业内人士执课,为C/C++编程爱好者的教程。

C/C++跨平台研发从基础到高阶实战系列套餐

一 专题从基础的C语言核心到c++ 和stl完成基础强化; 二 再到数据结构,设计模式完成专业计算机技能强化; 三 通过跨平台网络编程,linux编程,qt界面编程,mfc编程,windows编程,c++与lua联合编程来完成应用强化 四 最后通过基于ffmpeg的音视频播放器,直播推流,屏幕录像,

我以为我对Mysql事务很熟,直到我遇到了阿里面试官

太惨了,面试又被吊打

专为程序员设计的数学课

<p> 限时福利限时福利,<span>15000+程序员的选择!</span> </p> <p> 购课后添加学习助手(微信号:csdn590),按提示消息领取编程大礼包!并获取讲师答疑服务! </p> <p> <br> </p> <p> 套餐中一共包含5门程序员必学的数学课程(共47讲) </p> <p> 课程1:《零基础入门微积分》 </p> <p> 课程2:《数理统计与概率论》 </p> <p> 课程3:《代码学习线性代数》 </p> <p> 课程4:《数据处理的最优化》 </p> <p> 课程5:《马尔可夫随机过程》 </p> <p> <br> </p> <p> 哪些人适合学习这门课程? </p> <p> 1)大学生,平时只学习了数学理论,并未接触如何应用数学解决编程问题; </p> <p> 2)对算法、数据结构掌握程度薄弱的人,数学可以让你更好的理解算法、数据结构原理及应用; </p> <p> 3)看不懂大牛代码设计思想的人,因为所有的程序设计底层逻辑都是数学; </p> <p> 4)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; </p> <p> 5)想修炼更好的编程内功,在遇到问题时可以灵活的应用数学思维解决问题。 </p> <p> <br> </p> <p> 在这门「专为程序员设计的数学课」系列课中,我们保证你能收获到这些:<br> <br> <span> </span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">①价值300元编程课程大礼包</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">②应用数学优化代码的实操方法</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">③数学理论在编程实战中的应用</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">④程序员必学的5大数学知识</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">⑤人工智能领域必修数学课</span> </p> <p> <br> 备注:此课程只讲程序员所需要的数学,即使你数学基础薄弱,也能听懂,只需要初中的数学知识就足矣。<br> <br> 如何听课? </p> <p> 1、登录CSDN学院 APP 在我的课程中进行学习; </p> <p> 2、登录CSDN学院官网。 </p> <p> <br> </p> <p> 购课后如何领取免费赠送的编程大礼包和加入答疑群? </p> <p> 购课后,添加助教微信:<span> csdn590</span>,按提示领取编程大礼包,或观看付费视频的第一节内容扫码进群答疑交流! </p> <p> <img src="https://img-bss.csdn.net/201912251155398753.jpg" alt=""> </p>

Eclipse archetype-catalog.xml

Eclipse Maven 创建Web 项目报错 Could not resolve archetype org.apache.maven.archetypes:maven-archetype-web

使用TensorFlow+keras快速构建图像分类模型

课程分为两条主线: 1&nbsp;从Tensorflow的基础知识开始,全面介绍Tensorflow和Keras相关内容。通过大量实战,掌握Tensorflow和Keras经常用到的各种建模方式,参数优化方法,自定义参数和模型的手段,以及对训练结果评估与分析的技巧。 2&nbsp;从机器学习基础算法开始,然后进入到图像分类领域,使用MNIST手写数据集和CIFAR10图像数据集,从简单神经网络到深度神经网络,再到卷积神经网络,最终完成复杂模型:残差网络的搭建。完成这条主线,学员将可以自如地使用机器学习的手段来达到图像分类的目的。

Python代码实现飞机大战

文章目录经典飞机大战一.游戏设定二.我方飞机三.敌方飞机四.发射子弹五.发放补给包六.主模块 经典飞机大战 源代码以及素材资料(图片,音频)可从下面的github中下载: 飞机大战源代码以及素材资料github项目地址链接 ————————————————————————————————————————————————————————— 不知道大家有没有打过飞机,喜不喜欢打飞机。当我第一次接触这个东西的时候,我的内心是被震撼到的。第一次接触打飞机的时候作者本人是身心愉悦的,因为周边的朋友都在打飞机, 每

最近面试Java后端开发的感受:如果就以平时项目经验来面试,通过估计很难,不信你来看看

在上周,我密集面试了若干位Java后端的候选人,工作经验在3到5年间。我的标准其实不复杂:第一能干活,第二Java基础要好,第三最好熟悉些分布式框架,我相信其它公司招初级开发时,应该也照着这个标准来面的。 我也知道,不少候选人能力其实不差,但面试时没准备或不会说,这样的人可能在进团队干活后确实能达到期望,但可能就无法通过面试,但面试官总是只根据面试情况来判断。 但现实情况是,大多数人可能面试前没准备,或准备方法不得当。要知道,我们平时干活更偏重于业务,不可能大量接触到算法,数据结构,底层代码这类面试必问

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

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

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

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

相关热词 c#分级显示数据 c# 不区分大小写替换 c#中调用就java c#正则表达式 验证小数 c# vscode 配置 c#三维数组能存多少数据 c# 新建excel c#多个文本框 c#怎么创建tcp通讯 c# mvc 电子病例
立即提问
相关内容推荐