vue的data怎么使用js中的数据
new Vue({
el:'#test',
data:{}
})

这上面的data能不能使用另一个js文件的

var obj = {
    data:[{
        a:123,
        b:234
    },{
        a:789,
        b:654
    }]
}

这种数据?
怎么引入?
求大佬QAQ

2个回答

可以直接在 data 方法的 return 时引用其他模块的方法来获取数据,例如下面这个直接调用:

  data() {
    return {
      flag: Vue.config.productionTip
    }
  },

js中可以使用this.data = js中数据 给数据模型赋值

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
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中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) 求大佬帮忙
axios请求的数据怎么赋值给vue实例的data中
![图片说明](https://img-ask.csdn.net/upload/201808/23/1534987225_318375.png)
vue 无法向data中的数组中push
``` new Vue({ el: "#adminDiv", data: { admins: [], id: null, aname: null, pwd: null }, created: function () { alert("loadList"); $.get("admin/load").success(function (list) { alert(list.length); for(var i=0;i<list.length;i++){ alert(list[i].aname); this.admins.push(list[i]); } }) }, ``` list里面数据是正确的,但是无法push到data里的数组中,不知道是为什么求教 这里push会报错 ![图片说明](https://img-ask.csdn.net/upload/201905/22/1558489926_454576.png)
关于vue.js中data里面数组和对象的理解和显示问题
我mock.js造假数据后,返回给页面 ``` Object config: {url: "/params/equipments/tvmView", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …} data: Array(4) 0: {__ob__: Observer} 1: {__ob__: Observer} 2: {__ob__: Observer} 3: {__ob__: Observer} length: 4 __ob__: Observer {value: Array(4), dep: Dep, vmCount: 0} __proto__: Array ``` 如图,返回的是一个对象,里面的data是一个数组,数组里面包含四个对象 ``` data: Array(4) 0: tvmfrom: "AC" tvmto: Array(3) 0: "彩虹岛" 1: "铁皮屋" 2: "外婆饼店" ``` 我设定的是两个tvmfrom 和tvmto,其中的tvmto是一个数组,之前一个数组的时候我是 ``` data(){ return{ tableData: [], tvmToStation:[], } }, getTvmViewParams(){ this.$axios.params.getParams().then(res=>{ this.tableData = res.data this.tvmToStation = res.data[0].tvmto //this.tvmToStation = JSON.stringify(res.data) //数组深拷贝 得到的是数组[{}] //console.log(JSON.parse(JSON.stringify(res.data))) }) }, 然后放到我表格中 <el-table-column prop="tvmfrom" label="起始站" > </el-table-column> <el-table-column label="目标站点"> <!-- <template slot-scope="scope" > <el-tag>{{scope.row.tvmto}}</el-tag> </template> --> <el-tag v-for="index in tvmToStation" :key="index">{{index}}</el-tag> </el-table-column> ``` 这样写肯定是错的,tvmfrom的我是直接用prop绑定 那我怎么去获取tvmto的数组数据,遍历放到tag中 效果是 ![图片说明](https://img-ask.csdn.net/upload/201910/11/1570774027_813447.png)
Vue请求接口获取到数据后,赋值给data后怎么刷新数据
``` axios.get(url).then(function (res) { if (res.status=='200'){ console.log(res.data.data.name); this.movie = res.data.data; //this.name = res.data.data.name; //this.detail = res.data.data.detail; //this.pic = res.data.data.pic; //this.actor = res.data.data.actor; //this.link = res.data.data.link; console.log(this.movie); } else { console.log('失败'); alert("获取失败!"); } ```已经对data赋值了,但是页面的数据还是没更新,还需要操作dom吗
如何用vue.js双向绑定获取mui.js框架内部数据?
如何用vue.js双向绑定获取mui.js框架内部数据?APP项目中用vue.js获取input里面的内容,同时引用了mui样式和js,现在其他数据都可以获取到,就是mui.js获取的数据,无法引入vue.js中的data,求解!!!
关于vue.js 绑定的数据不渲染
在JS代码中使用console.log已经能再控制台里打印出数据了,但是在页面里数据依然是{{}}的样子,请问这是什么原因 页面代码 ``` <td class="m"> <div class="text-title">合同编号:</div> </td> <td class="n"> <div class="text-line"> <div class="input-group">{{newContractDetail.coalType}}</div> </div> </td> ``` JS代码 ``` view(row){ var param = { id:row.id }; $ajax("contract/detail.do", param, function (data) { if (data.success) { var row = data.body; vm.newContractDetail=row; alert(vm.newContractDetail.contractId); console.log(JSON.stringify(vm.newContractDetail)); console.log(vm.newContractDetail.coalType); }else{ setTimeout(function () { vm.isLoader = 3; }, 500) } }) }, ```
vue如何将api请求收到的数据动态的显示到模板上呢?
我使用的是uniapp的框架,与vue差不多。我在请求服务端的数据后会返回给我一段数据,我想将这段数据动态的显示在模板上,请问该如何实现呢?网络请求的数据已经拿到了,但是是在请求的回调函数中。 ``` onLoad() { uni.request({ url: 'http://hd215.api.okayapi.com/?s=App.Main_Meta.Get&', method: 'GET', data: { key: 'usermeta', app_key: --- }, success: (res) => { // res.data.data.data; console.log(res.data.data.data) uni.showToast({ title: '查询成功!', mask: true, duration: 1500 }); }, }); }, ``` onload下为页面加载时执行的方法,uni.request为发起请求的方法。控制台输出为 ``` add_time:"2019-01-19 00:53:17" data:{content: "哈哈哈哈哈"} err_code:0 err_msg:"" key:"usermeta" update_time:"" ```
在Vue项目中使用vue-aplayer插件时,做分页的效果,点击下一页音频数据不会更新,但是他会默认从头开始
这是组件 ``` <div class="demoThree" style="width: 100%"> <aplayer autoplay :music="{ title: ' ', artist: ' ', src: voice, pic: ' ', }" /> </div> ``` 在下面得到数据的函数赋值的时候 ``` if (data.data.data.records[0].audioPath!=null&&data.data.data.records[0].audioPath!=''){ this.voice=data.data.data.records[0].audioPath; } ``` 后台返回数据中没有这条数据就不会赋值,但是音频也从0开始
VUE 使用easyui中treegrid使用多行表头,表头与数据内容错位?
使用easyui VUE版本的TreeGrid显示多层表头时,如果在一个,双行的列之后加一个跨行的列,会出现数据错位的情况。如下图所示: ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552272424_271646.jpg) 但是如果把跨行的列放在前面,数据显示正常。如下图所示: ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552272454_3721.jpg) 但是现在项目要求不能更改显示的顺序。 使用easyui提供的demo,修改表头之后也会出现这样的情况。 ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552274110_161561.jpg) demo代码如下: ``` <template> <div> <h2>Column Group</h2> <TreeGrid style="height:250px" :data="data" idField="id" treeField="region"> <GridColumnGroup> <GridHeaderRow> <GridColumn field="region" title="Region" rowspan="2" width="25%"></GridColumn> <GridColumn title="2017" colspan="3" align="center"></GridColumn> <GridColumn field="f5" title="f5" rowspan="2" ></GridColumn> </GridHeaderRow> <GridHeaderRow> <GridColumn field="f1" title="f1" ></GridColumn> <GridColumn field="f2" title="f2" ></GridColumn> <GridColumn field="f3" title="f3" ></GridColumn> </GridHeaderRow> </GridColumnGroup> </TreeGrid> </div> </template> <script> export default { data() { return { data: this.getData() }; }, methods: { getData() { return [ { id: 1, region: 'Wyoming', children: [ { id: 11, region: 'Albin', f1: 'f1', f2: 'f2', f3: 'f3', f5: 'f5' }] }, { id: 2, region: 'Washington', children: [ { id: 21, region: 'Bellingham', f1: 'f1', f2: 'f2', f3: 'f3', f5: 'f5' } ] } ] } } } </script> ```
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也已经改变了,但是页面上没改变。没弄懂怎么回事。
关于Vue中v-for遍历的问题
如图: 使用semanticUI 的tab组件,要实现这个tab切换效果, ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580301878_788972.png) 在静态页面可以切换: 这是原始代码 ``` $('.menu .item').tab(); ---------------------------------- <div class="ui top attached tabular menu"> <a class="active item" data-tab="first">First</a> <a class="item" data-tab="second">Second</a> <a class="item" data-tab="third">Third</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> <div class="ui bottom attached tab segment" data-tab="second"> Second </div> <div class="ui bottom attached tab segment" data-tab="third"> Third </div> ``` 我想要实现 的效果是 使用 vue 获取到后台传递过来的tab标签里的分类数据, 点击标签,下方自动切换到对应的div. 自己的代码: ``` <div id="workArea" class="m-container m-padded-tb-big"> <div class="ui top attached tabular menu"> <a v-for="c in categories" class="item" data-tab="first">{{ c.name}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> </div> ``` 达到这个效果 ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580302472_363102.png) 我想请问一下这个下面的div 要怎么写才能实现这样一个vue切换效果呢 下面是全部代码: ``` <!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>工具</title> <link rel="stylesheet" type="text/css" href="../../static/css/me.css" th:href="@{/css/me.css}"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body style="background: #439B78;"> <div style="height: 20px;"></div> <div id="workArea" class="m-container m-padded-tb-big"> <div class="ui top attached tabular menu"> <a v-for="c in categories" class="active item" data-tab="first">{{ c.name}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> </div> <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script> <script src="../../static/js/vue.min.js" th:src="@{/js/vue.min.js}"></script> <script src="../../static/js/axios.min.js" th:src="@{/js/axios.min.js}"></script> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <script type="text/javascript"> $(function(){ var data1 = { uri: 'forekit', categories: [] }; var vue = new Vue({ el: '#workArea', data: data1, mounted:function(){ this.load(); }, methods:{ load: function() { var url = this.uri; axios.get(url).then(function(response){ vue.categories = response.data; }); } } }); $('.menu .item').tab(); }); </script> </body> </html> ```
vue中echarts图无法渲染
我在父组件中定义了一个容器,然后定义了echarts图的基本配置项,在created中调用一个方法,获取后台数据,然后将数据传递到子组件中渲染echarts图,现在数据都能成功传递,但是一直无法成功渲染echarts图 以下为父组件代码 ``` // 父组件代码 <template> <div> <div class="leftChart"> <linegraph :id="'leftChart'" :data="option1" style="height:330px;width:100%"></linegraph> </div> </div> </template> <script> // 引入子组件 import linegraph from "./EchartsShow.vue"; // 引入网络请求方法 import { getSumData } from "@/api/crd/orgLimitView/orgView" export default { data () { return { // echarts图基本配置项,未定义具体数据 option1: { title: { text: '授信额度结构', subtext: '行业维度', x: 'center', top: '3%' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: '2%', top: '2%' }, series: [ { name: '行业', type: 'pie', radius: '55%', center: ['50%', '55%'], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }, } }, created () { this.getSum() }, methods: { getSum () { // 调用get请求方法,获取后台数据,由于进度问题,目前只能传递固定的参数,才能获取到测试数据 getSumData('1', '01000').then(res => { if (res.status != 200) { return this.$message.error('获取数据失败,请重试') } const datas = res.data.data // 由于拿到的数据非常复杂繁多,需要进行一些处理,才能拿到需要的数据 this.option1.legend.data = this.tableDatas.map(item => { // 由于后台拿到的数据,都是数字类的码值,this.dicInd[item.industry] 用来翻译后台数据 return this.dicInd[item.industry] }) this.option1.series[0].data = this.tableDatas.map(item => { return { value: item.approveExpAmount, name: this.dicInd[item.industry] } }) console.log(this.option1.legend.data, '行业'); console.log(this.option1.series[0].data, '行业带数据'); }) } }, components: { linegraph } } </script> ``` 以下为子组件代码 ``` // 子组件代码 <template> <div v-bind:id="id" v-bind:data="data"></div> </template> <script> import echarts from "echarts"; export default { name: "echartsShow", data () { return { ChartLineGraph: null }; }, // 深度监听 父组件刚开始没有值,只有图标的配置项 // 父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变 watch: { data: { deep: true, handler: function (newVal, oldVal) { if (newvalue) { this.drawLineGraph(this.id, newVal) } else { this.drawLineGraph(this.id, oldVal) } } } }, props: ["id", "data"], created() { console.log(this.data, '打印传递过来的图表数据') }, mounted () { this.drawLineGraph(this.id, this.data); console.log(this.id, '打印id值') console.log(this.data, '打印data值') }, methods: { drawLineGraph (id, data) { let _this = this; let myChart = document.getElementById(id); this.ChartLineGraph = echarts.init(myChart); this.ChartLineGraph.setOption(data); window.addEventListener("resize", function () { _this.ChartLineGraph.resize(); }); } }, beforeDestroy () { if (this.ChartLineGraph) { this.ChartLineGraph.clear(); } } }; </script> ``` 从后台获取数据后,成功传递给子组件,但是echarts无法成功渲染 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384445_959195.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384684_683561.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384616_880352.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384792_786796.png) 经过多次尝试,我遇到了一个奇怪的问题 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385072_241075.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385147_470918.png) 求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts
Vue的报错,一个仿造百度的下拉菜单
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <script src='http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script> <style type="text/css"> .gray { background-color: #ccc; color: gold; } </style> </head> <body> <div id="box"> <input type="text" @keyup='get()' v-model='t1' /> <ul > <li v-for='value in myData'>{{value}}</li> </ul> <p v-show='myData.length === 0'>暂无数据。。。</p> </div> <!--https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=&req=2&csor=1&cb=jQuery1102005335343900131995_1480232231511&_=1480232231514--> <script> new Vue({ el:'body', data:{ myData:[], t1:'' }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su' , { wd:this.t1, },{ json:'cb' }).then(function(res){ this.myData = res.data.s; } , function(res){ console.log(res.status); }); } } }); </script> </body> </html> ``` 错误是这样的: su?callback=_jsonpx6o0z3kbkvsubwkyvd0lik9:1 Uncaught TypeError: Cannot read property 'sug' of undefined(anonymous function) @ su?callback=_jsonpx6o0z3kbkvsubwkyvd0lik9:1 vue-resource.js:1276 Uncaught (in promise) SyntaxError: Unexpected token u in JSON at position 0(…)
vue axios发送post请求 数据为Form Data格式,怎么设置成Request Payload的json数据格式
![图片说明](https://img-ask.csdn.net/upload/201912/03/1575381319_643878.png)
vue里实现列表内部单个增加数据?
现在想做的效果就是![图片说明](https://img-ask.csdn.net/upload/201703/28/1490687240_27390.png) 点击后面的“+”按钮单独增加这一行的数字。 数据是假装从后台拿回来的没有数量字段的json格式的数据。 ``` <!-- 加减 --> <div id="numChange"> <ul> <li v-for="(item,index) in testList"> <span v-text="item.name" style="margin-right: 30px"></span><span>{{counter}}</span><button @click="plus">+</button> </li> </ul> </div> <script type="text/javascript"> var vm=new Vue({ el:"#numChange", data:{ testList:[ {name:"item1",id:"0"}, {name:"item2",id:"1"}, {name:"item3",id:"2"} ], counter:0 }, methods:{ plus:function(){ this.counter++; } } }) </script> ``` 自己写的这里,不想给testList数据加别的字段,假设数据很多此时把counter写成【0,0,0】这样的也不太合适所以…求大神指点一下
关于vue的页面跳转后,如何每次进入页面时都能获取后台数据。
1.为了使vue页面,每次进入页面时都能从后台获取数据,选择了监听路由的变化,当路由发生变化且是跳转到本页面时,调用请求后台获取数据。 2.问题:上面的逻辑看似没有问题,但是总是报错。 3.代码如下: ``` data:function(){ return{ infoLoss:[], relationRemain:[] }}, watch:{ '$route'(to,from){ debugger const that=this if(to.path=='/charts'){ debugger that. getInfoLoss() that.getARs() } console.log(to.path); } }, methods: { getInfoLoss(){ debugger let that=this Vue.http.post('http://localhost:8080/ASGLS/getInfoLoss').then((res) => { debugger that.infoLoss=[ {name:'GAACP',value:res.body[0]}, {name:'ASGLS',value:res.body[1]}, {name:'Slicing',value:res.body[2]} ] }) }, getARs(){ let that=this Vue.http.post('http://localhost:8080/ASGLS/getAR').then((res) => { debugger that.relationRemain=[ {name:'GAACP',value:res.body[0]}, {name:'ASGLS',value:res.body[1]}, {name:'Slicing',value:res.body[2]} ] }) } ``` 4:报错:![图片说明](https://img-ask.csdn.net/upload/201903/22/1553257181_374628.png)
VUE如何根据变量动态获取对象属性值
VUE中如何根据一个字符穿或者一个变量,动态获取对象的属性值。如scope.row.col04和scope.row.col05应该是根据变量col02和col03的值来判断获取scope.row的哪个属性的 ``` 插件: <ElSelect :data="{ids: scope.row.col05, names: scope.row.col04}" :max="50" @okClick="(data)=>{scope.row.col05 = data.ids; scope.row.col04 = data.names;}" ></ElSelect> 数据源: data() { return { col02:'col04', col03:'col05' } } ```
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
小白学 Python 爬虫(25):爬取股票信息
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学 Python 爬虫(4):前置准备(三)Docker基础入门 小白学 Python 爬虫(5):前置准备(四)数据库基础 小白学 Python 爬虫(6):前置准备(...
小知识:浅谈二维码的生成和识别原理
目录 前言 条形码 静态二维码 二进制生成图形码 二维码的定位 前言 不知不觉中,我们的生活到处充满了二维码。登录账户需要二维码;加好友需要二维码;共享单车需要二维码;商品包装上也有二维码;甚至连楼下卖水果的阿姨手里都拿张二维码收款。那么,有没有想过这个二维码到底是什么东西呢?那么这个二维码的图案会不会多到不小心重合了呢? 条形码 在二维码出现之前,大行其道的...
[享学Jackson] 一、初识Jackson -- 世界上最好的JSON库
Jackson是一个简单的、功能强大的、基于Java的**应用库**。它可以很方便完成**Java对象**和**json对象(xml文档or其它格式)**进行互转。Jackson社区相对比较活跃,更新速度也比较快。Jackson库有如下几大特性: - 高性能,稳定:低内存占用,对大/小JSON串,大/小对象的解析表现均很优秀 - 流行度高:是很多流行框架的默认实现 - 容易使用:提供高层次的API,极大简化了日常使用 - 无需自己手动创建映射:内置了绝大部分序列化时和Java类型的映射关系 - 干净的JSO
卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!
作者 | Rocky0429 来源 | Python空间 大家好,我是 Rocky0429,一个喜欢在网上收集各种资源的蒟蒻… 网上资源眼花缭乱,下载的方式也同样千奇百怪,比如 BT 下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的 x 雷和某度网盘成了我经常使用的工具。 作为一个没有钱的穷鬼,某度网盘几十 kb 的下载速度让我...
世界上最牛的网络设备,价格低廉,其貌不扬......
夜深人静,电视和电脑都已经关机休息,但是我还在默默工作,我安静地趴在你家中的某个地方,7*24小时不眠不休,任劳任怨,目的只有一个,能让你舒服地躺在床上,畅快地刷手机!没错,这就是我,...
《面试宝典》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)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
Idea 中最常用的10款插件(提高开发效率),一定要学会使用!
学习使用一些插件,可以提高开发效率。对于我们开发人员很有帮助。这篇博客介绍了开发中使用的插件。
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
立即提问