web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    mysql
    织梦cms
    帝国cms
    git教程

当前位置: 建站教程 > vuejs >

vue项目优化之防抖案例分析

203 ℃

下面web建站教程为大家介绍一下vue项目优化之防抖案例分析

什么是防抖?

通俗理解,就是我们在点击请求或者点击加载等过程中,只需要点击一次,但由于请求慢,点击了好多次,导致多次请求,防抖就是在点击了好多次之后的最后一次才会请求。

案例分析:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue项目优化之防抖案例分析</title>
<script src="/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    输入内容:<input type="text"  @keyup="deb"/>
    <div> 输入次数:{{num}}</div>
  </div>
  <script>
      let time
      var app=new Vue({
          el:'#app',
          data:{
              num:0,
          },
          methods:{
              deb: function () {
  		let that = this
  		if (time) {
  		   clearTimeout(time)
  		}
  		time = setTimeout(function () {
  		   that.num++
  		   console.log('输入了'+that.num+'次')
  		   time = undefined;
  		}, 2000)
  	    }
          }
      })
  </script>
</body>
</html>

vue-cli脚手架卸载与安装代码总结

运行vue函数提示将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决方法

vuejs单元测试运行npm run unit报错解决方法

vuejs实现部分页面跳转后禁止返回到前一个页面

上面是“vue项目优化之防抖案例分析”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2212.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

el-table表格嵌套v-for循环展示

想做一个表格嵌套表格的模板,如以下图片:

el-table表格嵌套v-for循环展示

1、template代码如下:

<el-table
  :data="listData"
  border
  v-loading="dataLoading"
  :header-cell-style="{
    background: '#00C0EF',
    color: '#fff',
    padding: '2px 0'
  }"
  style="width: 100%"
  >
  <el-table-column
    prop="area"
    label="区域"
    show-overflow-tooltip
    min-width="70"
  >
  </el-table-column>
  <el-table-column
    prop="name"
    label="省份"
    show-overflow-tooltip
    min-width="70"
  >
  </el-table-column>
  <el-table-column
    v-for="(item, index) in listDataMonths"
    :key="index"
    :label="item"
    align="center"
  >
<el-table-column label="人口" min-width="70" align="center">
  <template slot-scope="scope">
{{ scope.row.list[index].money }}
  </template>
</el-table-column>
<el-table-column label="地区" min-width="70" align="center">
  <template slot-scope="scope">
{{ scope.row.list[index].state }}
  </template>
</el-table-column>
   </el-table-column>
   <el-table-column prop="total" label="GDP" min-width="70"></el-table-column>
</el-table>

2、js代码如下:

data() {
  return {
    dataLoading: false,
    listData: [
      {
        area: "华北区",
        name: "浙江省",
        total: "3221",
        list: [
          {
            month: "202201",
            money: "2211",
            state: "杭州市"
          },
          {
            month: "202202",
            money: "1421",
            state: "宁波市"
          },
          {
            month: "202203",
            money: "1332",
            state: "温州市"
          }
        ]
      },
      {
        area: "东南区",
        name: "广东省",
        total: "3211",
        list: [
          {
            month: "202201",
            money: "5444",
            state: "广州市"
          },
          {
            month: "202202",
            money: "3211",
            state: "深圳市"
          },
          {
            month: "202203",
            money: "2211",
            state: "珠海市"
          }
        ]
      },
      {
        area: "东北区",
        name: "黑龙江",
        total: "3211",
        list: [
          {
            month: "202201",
            money: "5444",
            state: "哈尔滨市"
          },
          {
            month: "202202",
            money: "3211",
            state: "齐齐哈尔"
          },
          {
            month: "202203",
            money: "2211",
            state: "鸡西市"
          }
        ]
      }
    ],
    listDataMonths: ["202201","202202","202203"] //把listData里面的日期遍历出来
  };
点击阅读全文
上一篇:pc端、安卓端window.open可以打开,ios失效
下一篇:vue-roter路由配置的3种模式介绍