Data display problem

In daily development, when the data returned by the background is not the data required by the front end, it is necessary to use filter to filter the characters/data it needs

String interception starts at subscript 0 and ends at subscript 10. Extra characters show…

Component filter

filters: { dataList(val) { return val.substr(0, 10) + "..." ; // console.log('vas',val) }, },Copy the code

Data is returned as a number but the corresponding meaning of the number is required. The following uses the switch to judge

statusList(val) { let n = ""; Switch (val) {case 0: n = "to execute "; break; Case 1: n = "executing "; break; Case 2: n = "Execute complete "; break; Case 3: n = "Execution failed "; break; default: n = "--"; } return n; },Copy the code

Global filter

Create filter.js in the API folder

Const vFilter = {indexType: function (val) {let n = ""; Switch (val) {case 1: n= ""; break; Elseif (" n "=" x ") break; default: n= "--"; // case 1: n= 1; break; // case 2: n= 1; break; // case 3: n= "; break; // default: n= "--"; } return n; IndexType2: function (val) {let n = ""; Switch (val) {// case 1: n= "original index "; break; // case 2: n= ""; break; // default: n= "--"; Elseif (n= 1) break; Elseif (" n "=" 0 ") break; Elseif (" n "=" 0 ") break; default: n= "--"; } return n; IndexType3: function (val) {let n = ""; Switch (val) {case 1: n= ""; break; Elseif n= "value index "; break; default: n= "--"; } return n; }, dataType: function (val) {let n = ""; Switch (val) {case 1: n= "text "; break; Elseif n= "; break; Elseif (" n "=" 0 ") break; Elseif n= "code "; break; Elseif n= ""; break; Elseif n= "integer "; break; Elseif n= "elseif "; break; default: n= "--"; } return n; }, // state1: function (val) {let n = ""; Switch (val) {case 1: n= "unpublished "; break; Case 2: n= "published "; break; Elseif (n= 1) and (n= 2) break; Elseif (" n "=" 0 ") break; default: n= "--"; } return n; }, state2: function (val) {let n = ""; Switch (val) {case 0: n= "create "; break; Elseif (" n "=" done ") break; default: n= "--"; } return n; }, state3: function (val) {let n = ""; Switch (val) {case 0: n= ""; break; Case 1: n= "enable "; break; default: n= "--"; } return n; Function (val) {let n = ""; Switch (val) {case "0": n= 0; break; Case "1": n= "enable "; break; default: n= "--"; } return n; }, // indexGroupTag: function (val) {let n = ""; Switch (val) {case 1: n= ""; break; Case 2: n= ""; break; Elseif n= ""; break; default: n= "--"; } return n; } } export default vFilterCopy the code

Used globally after main.js was introduced

import vueFilter from './api/filter'
for (let key in vueFilter) {
  Vue.filter(key, vueFilter[key])
}
Copy the code

Use directly on the component USES For example: | indexType3 filtering methods for global definitions

< li > < span > packet type 3: < / span > {{dirCodeTableData. IndexType | indexType3}} < / li >Copy the code

Other uses can be self – calibration.

Record the left vertical line of the CSS style text

h4 { position:relative; color: #409EFF; font-size:20px; padding-left:16px; margin-right:20px; margin-bottom:20px; &:before{ position:absolute; left:0; top:2px; content:""; width:5px; height:24px; background:#409EFF; }}Copy the code

# When using VUE to obtain data, there are N pieces of data, only the first 3 pieces are needed, how to deal with it

Write as many indexes as you need

Vue gets the last page route this does not work

BeforeRouteEnter (to, from, next) {next(vm=>{// here vm is vue instance, can be used as this using console.log(to) console.log(from)})}Copy the code

Gets the DOM document height

/ life cycle/window.adDeventListener ('resize', this.getheightss); This.getheightss ()/method/getHeightss(){this.heightList= window.innerheight -210+'px'; },Copy the code