简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Verwenden Sie vue2-highcharts, um Kurvendaten zu implementieren

php中世界最好的语言
Freigeben： 2018-03-27 14:50:04
Original
2576 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Verwendung von vue2-highcharts zum Implementieren von Kurvendaten vorstellen und welche Vorsichtsmaßnahmen für die Verwendung von vue2-highcharts zum Implementieren von Kurvendaten gelten. Das Folgende ist ein praktischer Fall ein Blick.

1. Der zu erzielende Effekt ist wie folgt:

2. Die Vue-Frontend-Seite lautet wie folgt: 

<template>
 <p>
  <p>
  <p>
    <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>
    <span >历史曲线</span>
  </p>
  </p>
  <p >
   <p >
    <span >{{$route.params.monitorName}}({{$route.params.meterId}})</span>
   </p>
  </p>
  <p >
   <p >
    <yesterdaypicker v-on:startPicked="startPicked" style="margin-left:10px;"></yesterdaypicker>
   </p>
    <p >
    <daypicker v-on:endPicked="endPicked" style="margin-left:10px;"></daypicker>
    </p>
  </p>
  <p >
   <p >
     <vchooser :selections="periodList" @on-change="onParamChange(&#39;versions&#39;, $event)"></vchooser>
   </p>
  </p>
  <p >
   <p class="charts" >
     <vue-highcharts :options="options" ref="lineCharts" ></vue-highcharts>
   </p>
  </p>
 </p>
</template>
<script>
 import vchooser from '../components/chooser.vue'
 import VueHighcharts from 'vue2-highcharts'
 import daypicker from '../components/daypicker.vue'
 import yesterdaypicker from '../components/yesterdaypicker.vue'
 export default {
 data() {
  return{
   startDay:'',
   endDay:'',
   setIntervalNum:0,
   itemStatus:0,
   itemTitle:'功率因数',
   itemType:this.$route.params.meterType,
   periodList:[
    {
    label: '功率因数',
    value: 0
    },
    {
    label: '电流',
    value: 1
    },{
    label: '电压',
    value: 2
    },{
    label: '有功功率',
    value: 3
    },{
    label: '无功功率',
    value: 4
    }/*,{
    label: '视在功率',
    value: 5
    }*/,{
    label: '有功电量',
    value: 6
    },
   ],
   ownerFreeData: [],
   options: {
   global: {
    useUTC: false
   },
   chart: {
    type: 'spline'
   },
   title: {
    text: '功率因素'
    //text: ' '
   },
   subtitle: {
    text: ''
   },
   xAxis: {
    type: 'category'
   },
   yAxis: {
    title: {
    text: '功率因素(%)'
    //text: ' '
    },
    labels: {
    formatter: function () {
     return this.value;
    }
    }
   },
   tooltip: {
    crosshairs: true,
    shared: true
   },
   credits: {
    enabled: false
   },
   plotOptions: {
    spline: {
    marker: {
     radius: 4,
     lineColor: '#666666',
     lineWidth: 1
    }
    }
   },
   series: []
   }
  }
 },
  methods: {
  startPicked(year, month, date) {
   //this.ownerFreeData = []
   if(this.$refs.lineCharts != null){
    this.$refs.lineCharts.removeSeries();
   }
   var monthStr = '';
   var dayStr = '';
   if(month < 10){
    monthStr = `0${month}`;
   }else{
    monthStr = `${month}`;
   }
   if(date < 10){
    dayStr = `0${date}`;
   }else{
    dayStr = `${date}`;
   }
   this.startDay = `${year}-` + monthStr + &#39;-&#39; + dayStr;
   if(this.$refs.lineCharts != null){
    this.getList();
   }
  },
  endPicked(year, month, date) {
   //this.ownerFreeData = []
   if(this.$refs.lineCharts != null){
    this.$refs.lineCharts.removeSeries();
   }
   var monthStr = &#39;&#39;;
   var dayStr = &#39;&#39;;
   if(month < 10){
    monthStr = `0${month}`;
   }else{
    monthStr = `${month}`;
   }
   if(date < 10){
    dayStr = `0${date}`;
   }else{
    dayStr = `${date}`;
   }
   this.endDay = `${year}-` + monthStr + &#39;-&#39; + dayStr;
   if(this.$refs.lineCharts != null){
    this.getList();
   }
  },
  onParamChange (attr, val) {
   this.itemStatus = val.value;
   if(this.$refs.lineCharts != null){
    this.$refs.lineCharts.removeSeries();
   }
   if(this.$refs.lineCharts != null){
    this.getList();
   }
  },
  routerBack(){
   //let lineCharts = this.$refs.lineCharts;
   //lineCharts.getChart().destroy();
   //this.$router.go(-1);
   var mid = this.$route.params.id;
   var mname = this.$route.params.name;
   var mpname = this.$route.params.pname;
   this.$router.push({name: &#39;timeSortPoint&#39;, params: {id: mid,name:mname,pname:mpname}});
  },
  setType(){
   var title = &#39;&#39;;
   let lineCharts = this.$refs.lineCharts;
   if(this.itemStatus == 0){
    title = &#39;功率因素&#39;;
    lineCharts.getChart().title.update({ text: &#39;功率因素&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;功率因素(%)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 功率因素&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; 总功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; A相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 总功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相功率因素&#39;,data: []});
    }
   }else if(this.itemStatus == 1){
    title = &#39;电流&#39;;
    lineCharts.getChart().title.update({ text: &#39;电流&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;电流(A)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39;电流&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; Ia 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; Ib 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; Ic 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; 零序电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; Ia 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; Ib 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; Ic 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 零序电流&#39;,data: []});
    }
   }else if(this.itemStatus == 2){
    title = &#39;电压&#39;;
    lineCharts.getChart().title.update({ text: &#39;电压&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;电压(V)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 电压&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; A相电压&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相电压&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相电压&#39;,data: []});
    }
   }else if(this.itemStatus == 3){
    title = &#39;有功功率&#39;;
    lineCharts.getChart().title.update({ text: &#39;有功功率&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;有功功率(KVA)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 有功功率&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; 总有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; A相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 总有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相有功功率&#39;,data: []});
    }
   }else if(this.itemStatus == 4){
    title = &#39;无功功率&#39;;
    lineCharts.getChart().title.update({ text: &#39;无功功率&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;有功功率(KVA)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 无功功率&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; 总无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; A相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 总无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相无功功率&#39;,data: []});
    }
   }else if(this.itemStatus == 5){
   }else if(this.itemStatus == 6){
    title = &#39;总有功电量&#39;;
    lineCharts.getChart().title.update({ text: &#39;总有功电量&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;总有功电量(KWH)&#39;});
    lineCharts.addSeries({name: this.startDay + &#39; 总有功电量&#39;,data: []});
    lineCharts.addSeries({name: this.endDay + &#39;总有功电量&#39;,data: []});
   }
  },
  getList(){
   var title = &#39;&#39;;
   let lineCharts = this.$refs.lineCharts;
   var meterId = this.$route.params.meterId;
   this.setType();
   this.$http.post(this.URLINFO + &#39;/mobile/electricity/getElectricityApp.do&#39;,{meterId:meterId,startDay:this.startDay,endDay:this.endDay})
   .then(function (res) {
    for(var i = 0;i < res.data.ls1.length; i++) {
     if(this.itemStatus == 0){
      if(this.itemType == 0){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].totalnum],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].totalnum],false,false);
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].numa],false,false);
       lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].numb],false,false);
       lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].numc],false,false);
      }
     }else if(this.itemStatus == 1){
      if(this.itemType == 0){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].ia],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ia],false,false);
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ib],false,false);
       lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ic],false,false);
       lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].zeroi],false,false);
      }
     }else if(this.itemStatus == 2){
      if(this.itemType == 0){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].ua],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ua],false,false);
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ua],false,false);
       lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].uc],false,false);
      }
     }else if(this.itemStatus == 3){
      if(this.itemType == 0){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].totalp],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].pa],false,false);
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].pb],false,false);
       lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].pc],false,false);
      }
     }else if(this.itemStatus == 4){
      if(this.itemType == 0){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].reactivep],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].reactivep],false,false);
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].reactivepa],false,false);
       lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].reactivepb],false,false);
       lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].reactivepc],false,false);
      }
     }else if(this.itemStatus == 6){
      lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].readNum],false,false);
     }
    }
    for(var i = 0;i < res.data.ls2.length; i++) {
     if(this.itemStatus == 0){
      if(this.itemType == 0){
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalnum],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalnum],false,false);
       lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].numa],false,false);
       lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].numb],false,false);
       lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].numc],false,false);
      }
     }else if(this.itemStatus == 1){
      if(this.itemType == 0){
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ia],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ia],false,false);
       lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ib],false,false);
       lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ic],false,false);
       lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].zeroi],false,false);
      }
     }else if(this.itemStatus == 2){
      if(this.itemType == 0){
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ua],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ua],false,false);
       lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ub],false,false);
       lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].uc],false,false);
      }
     }else if(this.itemStatus == 3){
      if(this.itemType == 0){
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalp],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalp],false,false);
       lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].pa],false,false);
       lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].pb],false,false);
       lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].pc],false,false);
      }
     }else if(this.itemStatus == 4){
      if(this.itemType == 0){
       lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivep],false,false);
      }else if(this.itemType == 1){
       lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivep],false,false);
       lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivepa],false,false);
       lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivepb],false,false);
       lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivepc],false,false);
      }
     }else if(this.itemStatus == 6){
      lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].readNum],false,false);
     }
    }
    lineCharts.getChart().redraw();
   })
   .catch(function (error) {
    console.log(error)
    this.$toast(&#39;查询业主电费异常&#39;);
   });
  }
  },
  components: {
   vchooser,
  VueHighcharts,
  daypicker,
  yesterdaypicker
  },
 mounted () {
  this.getList()
 }
 }
 function getCurrentTime(){
 var date = new Date();
 var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
 var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
 var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
 return hour + &#39;:&#39; + minute + &#39;:&#39; + second;
 }
 function getTime(nS){
  return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
 }
 function formatDate(now) {
  var year=now.getYear();
  var month=now.getMonth()+1;
  var date=now.getDate();
  var hour=now.getHours();
  var minute=now.getMinutes();
  var second=now.getSeconds();
  //return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
  return hour+":"+minute+":"+second;
 }
 function getTimeStr(ns){
  var d=new Date(ns);
  return formatDate(d);
 }
</script>
<style>
*{margin:0;padding:0; list-style:none }
h1,h2,h3,h4,h5,h6{font-size:16px; font-weight:normal;}
.rank-head{
  width: 100%;
  height: 40px;
  position:fixed;
  background: -webkit-linear-gradient(top,rgba(0,0,0,.6),rgba(0,0,0,0));
  z-index: 999;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
.container{
  width: 100%;
  overflow: hidden
}
.rank-head-back{
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  background: url("../assets/index/back.png") no-repeat center center;
  background-size: 100% 100%;
}
</style>
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie ein dynamisches 3D-Diagramm mit Canvas

H5 liest die Datei und lädt sie hoch die Servermethode

Das obige ist der detaillierte Inhalt vonVerwenden Sie vue2-highcharts, um Kurvendaten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
数据
Quelle：php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Entwicklung mit der Adobe Html5-Erweiterung Nächster Artikel：NodeJS-Crawler-Framework-Superagent
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Vue 2.7 und Kombinations-API + Vuex Wir versuchen, eine Vue2-Anwendung auf Vue2.7 zu migrieren, haben jedoch einige Probleme b...
Aus 2023-11-03 10:06:49
0
1
277
Highcharts: Stellen Sie sicher, dass die Bildlaufleiste nur den Zeichenbereich abdeckt Hier ist eine Geige für ein Beispieldiagramm, basierend auf dem Scrollbar-Tutorial in der ...
Aus 2023-09-16 11:04:01
0
1
639
Der richtige Weg zur Komponentenentkopplung Ich beschäftige mich mit der Kommunikation zwischen zwei Komponenten (mithilfe von Vue2), ...
Aus 2023-09-14 10:57:11
0
1
196
So filtern Sie die Ergebnisse von Kontrollkästchen (Arrays) in Vue Ich kann die Ergebnisse eines Nachrichtenartikels, dem in Vue2 mehrere Labels/Kontrollkäst...
Aus 2023-09-06 20:25:35
0
1
370
Vue.js 3 – Eigentlich keine Instanzen von Komponenten? In Vue2 können Sie eine reaktive Instanz ohne Komponenten erstellen, etwa so: varvue=newVu...
Aus 2023-09-04 15:03:23
0
1
214
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！