精华内容
下载资源
问答
  • 然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。 直接上代码 html部分: <ul class="progress_box"> </ul> css部分: * { margin: 0; padding: 0; } ul { width: 360px; ...

    实现以下效果:
    在这里插入图片描述
    运用的知识点主要是html的伪元素。然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。
    直接上代码
    html部分:

    <ul class="progress_box">
        </ul>
    

    css部分:

     * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 360px;
            margin:100px auto;
        }
        
        li {
            position: relative;
            padding: 0 21px;
            list-style: none;
            height: 54px;
            border-left: 1px solid #4BACFD;
        }
        
        li:before {
            content: "";
            display: block;
            position: absolute;
            /* margin-left: -6px; */
            top: 0;
            left: -5px;
            width: 10px;
            height: 10px;
            /* line-height: 22px; */
            text-align: center;
            background: #4BACFD;
            /* color: #fff; */
            /* font-size: 14px; */
            border-radius: 50%;
        }
        .last_progress{
            border: none;
        }
        .last_progress::before{
            content: "●";
            display: table-cell;
            position: absolute;
            vertical-align: middle;
            /* margin-left: -6px; */
            /* top: 0; */
            left: -6px;
            width: 14px;
            height: 14px;
            line-height: 11.5px;
            text-align: center;
            background: rgba(75, 172, 253, .3);
            color: #4BACFD;
            font-size: 18px;
            border-radius: 50%;
        }
        .progress_content{
            position: absolute;
            top: -4px;
        }
        .progress_title{
            font-size: 15px;
            color: #222;
            font-weight: 600;
            margin-bottom: 3px;
        }
        .progress_time{
            color: #999999;
            font-size: 12px;
        }
        .active{
            color: #2BA0FF;
        }
    

    JS部分:

     var progressList = [
                {'progress_title':'无感支付签约成功','progress_time':'2020.06.10 09:00'},
                {'progress_title':'提额申请提交成功,银行审核中。','progress_time':'2020.06.10 10:00'},
                {'progress_title':'提额审核通过,提额额度xxxx元。','progress_time':'2020.06.10 10:05'},
                {'progress_title':'提额成功,当前可用额度为10000元','progress_time':'2020.06.10 10:05'}
            ]
            function renderProgress(progressList){
                var progressBox = document.querySelector('.progress_box');
                console.log(progressBox)
                console.log(progressList);
                var progressTemplate = ''
                for(var i = 0; i < progressList.length; i ++){
                   if(i == progressList.length - 1){
                    progressTemplate += "<li class='last_progress'><div class='progress_content'><p class='progress_title active'>"+progressList[i].progress_title+"</p><p class='progress_time'>"+progressList[i].progress_time+"</p> </div></li>"
                   }else{
                    progressTemplate += "<li><div class='progress_content'><p class='progress_title'>"+progressList[i].progress_title+"</p><p class='progress_time'>"+progressList[i].progress_time+"</p> </div></li>"
                   }
                }
                progressBox.innerHTML = progressTemplate
            }
            renderProgress(progressList)
    
    展开全文
  • 原生js实现动态表格分页(封装版)

    千次阅读 2019-08-15 14:04:35
    之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的。 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页。数据的获取我用的vue,也可以用ajax等其他的,反正跟...

    之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的。
    后台动态获取数据进行渲染,等页面渲染成功之后在进行分页。数据的获取我用的vue,也可以用ajax等其他的,反正跟分页没多大关系,有一点就是分页函数必须在页面渲染之后执行。这里用到window.onload函数。
    先看下效果,当不能点击时按钮显示为灰色。
    在这里插入图片描述
    样式自己写,我用的bootstrap的响应式表格。
    html部分

    <table class="table table-striped- table-bordered table-success table-hover "  >
    		<thead class="text-center" style="background-color: #20C997;color: white;">
    				<tr>
    					<th ><b>字段主题</b></th>
    					<th ><b>字段描述</b></th>
    					<th ><b>字段名称</b></th>
    					<th ><b>字段类型</b></th>
    				</tr>
    		</thead>
    		<tbody id="idData">
    				<tr v-for="(item,index) in data" :key='index'>
    					<td >{{item.elclass}}</td>
    					<td >{{item.eldesc}}</td>
    					<td >{{item.elname}}</td>
    					<td >{{item.eltype}}</td>
    				</tr>
    		</tbody>
    </table>
    <!--分页按钮区域-->
    <div  align="center" >
    	<div id="barcon" name="barcon" style="color: white;font-size: large;font-weight: bold;"></div>
    </div>
    

    注:id='idData'加在tbody上,不然会将头也算在数据num里,点击下一页的时候会跟着分页。

    js部分

    
    /**
     * 2019/8/20更新
     * 分页函数
     * pno--页数
     * psize--每页显示记录数
     * 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
     * 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
     **/
    function goPage(pno,psize){
        var itable = document.getElementById("idData");
        var num = itable.rows.length;//表格所有行数(所有记录数)
        //console.log(num);
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        //总共分几页 
        if(num/pageSize > parseInt(num/pageSize)){   
                totalPage=parseInt(num/pageSize)+1;   
           }else{   
               totalPage=parseInt(num/pageSize);   
           }   
        var currentPage = pno;//当前页数
        var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31 
           var endRow = currentPage * pageSize;//结束显示的行   40
           endRow = (endRow > num)? num : endRow;    //40
          // console.log(endRow);
           //遍历显示数据实现分页
        for(var i=1;i<(num+1);i++){    
            var irow = itable.rows[i-1];
            if(i>=startRow && i<=endRow){
                irow.style.display = "table-row";    
    			//irow.cells.style.width = "11%"; 
            }else{
                irow.style.display = "none";
    			//irow.cells.style.width = "11%"; 
            }
        }
        //var pageEnd = document.getElementById("pageEnd");
        var tempStr = "共"+num+"条数据 分"+totalPage+"页 当前第"+currentPage+"页&nbsp;&nbsp;";
        if(currentPage>1){
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>&nbsp;&nbsp;";
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a>&nbsp;&nbsp;"
        }else{
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >首页</a>&nbsp;&nbsp;";
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >上一页</a>&nbsp;&nbsp;";   
        }
    
        if(currentPage<totalPage){
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a>&nbsp;&nbsp;";
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>&nbsp;&nbsp;";
        }else{
            tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >下一页</a>&nbsp;&nbsp;";
           tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >尾页</a>&nbsp;&nbsp;";   
        }
    	
    	tempStr +="跳转至";
    	tempStr +="<select class='' style='width:60px' οnchange='goPage(this.value,"+psize+")'>"; 
    	tempStr +="<option></option>"
    	for(var j=1;j<=totalPage;j++){
    		tempStr +="<option  value='"+j+"' >第"+ j +"页</option>";
    	}
    	tempStr +="</select>";
        document.getElementById("barcon").innerHTML = tempStr;
        
    }
    

    调用

    <script type="text/javascript" language="javascript">
    			window.onload = function() {  //页面加载完之后执行
    				goPage(1, 10);  //1为当前页数,10为每页显示行数
    			};
    		</script>
    

    更新(2019-8-20)
    增加跳转至第几页。更新了js部分,看效果
    在这里插入图片描述

    注:若添加查询功能一定要在查询结束后在执行一次函数,否则num无法更新,如vue中
    updated() {goPage(1, 10);}

    展开全文
  • 原生JS以及JQuery实现信息动态播放 元旦假期赶项目,真刺激!!! 上次国庆期间也“加班”,用BingMap画图(详情见JS画地图–BingMap)。这次比上次的麻烦一点,需要的功能也多了起来。废话不多说,直接开始,Let’s ...

    原生JS以及JQuery实现信息动态播放

    元旦假期赶项目,真刺激!!!

    上次国庆期间也“加班”,用BingMap画图(详情见JS画地图–BingMap)。这次比上次的麻烦一点,需要的功能也多了起来。废话不多说,直接开始,Let’s go!

    1.项目需求

    项目需求是每个项目开始前必须要熟知的一点,这次项目就有以下几点要求:

    • 利用javascript在H5页面渲染地图,地图为英文版
    • 地图上添加四个标记点,分别坐落于4个不同的位置
    • 每个标记点对应一个提示框,提示框里会有数据展示
    • 数据是按照时间变化的,所以再需要一个时间轴实现数据轮播

    需求提完了,就要开始着手准备实现了。

    2.项目规划(项目设计)

    需求已经提出来了,如何实现,用什么技术,什么工具实现,效果图应该是什么样的,都应该规划好。

    • 关于英文地图渲染,JS画地图–BingMap这里介绍了,使用BingMap WEB API就好了
    • 4个坐标对应不同标记点,每个标记点对应一个提示框,提示框有关闭按钮,可以实现关闭功能。关闭后,点击标记点,可以再次展示提示框。这些通通可以使用BingMap WEB API以及JS技术来实现
    • 时间轴动态播放,定时器定时,一段时间播放一个时间点数据,同时根据时间点数据变化,再变换提示框里数据,这里使用原生JS以及JQuery实现。

    最难的是时间轴动态播放,因为源数据的时间字段并不是连续的,这一下子将难度提高了一倍。

    3.代码编写

    这里省去了处理数据的步骤,一般的话我比较习惯,等先把静态资源渲染完,再去处理数据。

    • 前面两点,地图渲染和标记以及提示框,就不细说了。这里主要记录一个记忆点。

        //Attention!!! Microsoft.Maps.Location(lat, lon),latitude first,then the longitude
        var point1 = new Microsoft.Maps.Location(30.581084, 114.3162); //武汉市
        ...
      

      上篇地图渲染也记录过了,BingMap与Supermap不同,它先纬度后经度。画地图,做标记,各城市坐标肯定是需要的。这里附上百度提供的各省市坐标文件。

      链接:https://pan.baidu.com/s/1uwUG7Rm619Lt-xyRN_GY1w
      提取码:r6wd

      再附上一个工具网址,http://epsg.io/ ,该网站可以进行不同地图坐标系的坐标进行转换。

    • 使用api渲染地图成功后会发现,地图上会有一些logo,这时候就需要自己手动消除了。使用浏览器自带的控制台,找到不必要的元素,设置其样式为不可见即可。这里再记录一个点:

      h5:

          <div class="btn-control btn-play" onclick="btnControl()"></div>
      

      css:

      /*纯css完成'√','×',暂停以及播放按钮*/
      .btn-control {
          width: 34px;
          height: 34px;
          margin-bottom: 16px;
          cursor: pointer;
          background-color: #fff;
          position: absolute;
          right: 30px;
          top: 192px;
          border: 1.5px solid #444444;
          border-radius: 50%;
      }    /*按钮样式*/
      
      .btn-play:before {
          display: block;
          content: '';
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 14px 0 14px 19px;
          border-color: transparent transparent transparent black;
          margin: 3px 0 0 10px; 
      }      /*点击之前显示暂停*/
      
      .btn-pause:after {
          content: "";
          border-style: double;
          border-width: 0px 0px 0px 20px;
          position: relative;
          top: 6px;
          left: 7px;   /*点击之后更换类名修改样式为播放*/
      }
      
      .btn-play:before {
          display: block;
          content: "";
          width: 10px;
          height: 20px;
          border-style: solid;
          border-width: 0 3px 3px 0;
          transform: rotate(45deg);
          margin: 2px 0 0 10px;
      }      /*点击之前显示'√'*/
      
      .btn-pause:after {
          content: 'x';
          display: block;
          width: 20px;
          height: 5px;
          color: #444;
          font-size: xx-large;
          margin: -7px 9px; /*点击之后更换类名修改样式为'×'*/
      }
      
    • 重头戏就是时间轴,这里就仔细陈述。

      首先提高用户体验度,设计了一个按钮,点击它,时间轴模块显示,再点击,时间轴模块隐藏。

      上代码:

      h5:

          <!--时间轴-->
      	<div class="heatMapTimer">
              ...
      	</div>
      	<!--播放功能-->
      	<div class="btn-control btn-play" onclick="btnControl()"></div>
      

      js:

      var count = 0;
      function btnControl() {
        ++count;
        if (count % 2 === 1) {
          $(".btn-control").removeClass("btn-play").addClass("btn-pause"); //点击次数为单时,播放
          document.getElementsByClassName("heatMapTimer")[0].style.visibility =
            "visible";
        } else {
          $(".btn-control").removeClass("btn-pause").addClass("btn-play"); //点击次数为双时,暂停
          document.getElementsByClassName("heatMapTimer")[0].style.visibility =
            "hidden";
        }
      }
      

      逻辑很简单,点击次数单数时,时间轴显示。双数时,时间轴隐藏。见图:

    在这里插入图片描述

    在这里插入图片描述

    其次开始播放功能,播放里面又有几种情况:

    • 正常按顺序播放
    • 规定显示6个点,当运行到第6个点时返回到第一个点重新播放
    • 点击按钮可以暂停,再次点击可以继续
    • 播放时点击时间点可以直接跳到这个点并继续播放
    • 正常播放完时停止
    • 播放完停止后,没有数据的点隐藏起来。(比如说,数据播放完时在第二个点,则第3,4,5,6个点隐藏起来)
    • 播放停止后,再次点击,重新再渲染数据,实现再次播放

    具体代码太多了,不便于贴出来,这里附上项目地址BingMap地图渲染,注释很详细。

    截取一部份做展示用:

      //点击播放时间轴事件
      $timeUl.on("click", ".time-play", function () {
        if (play_cnt === 0) {
          $(this).removeClass("time-play").addClass("time-pause");
          index = Number($timeUl.find("li.active").attr("data-index")); //将字符串强制转换为数字类型
          timer = setInterval(function () {
            //判断当前索引的位置,如果在最后一位则从第一个时间点开始,反之则按顺序播放
            if (lenCount == index + 1) {
              $timeUl.find("li:eq('" + lenCount + "')").removeClass("active");
              $timeUl.find("li:eq(1)").addClass("active");
            } else {
              $(".time-line li.active")
                .next()
                .addClass("active")
                .siblings() //选择除本身以外的其他同级元素,,
                .removeClass("active");
            }
            $timeLi.each(function () {
              if ($(this).hasClass("active")) {
                index = Number($(this).attr("data-index")); //字符串转换为数字类型,索引从0开始
                normal.push(index); //获取当前active的点的索引并存入normal
                //用来判断是否正常轮播
                if (normal.length >= 2) {
                  let ds1 = normal[normal.length - 1];
                  let ds2 = normal[normal.length - 2]; //这里注意,js不能使用arr[-1]取最后一个值
                  /*正常播放:如果倒数第一个数比倒数第二个数多1,
                    或者倒数第一个为0(也即是第一个),倒数第二个数为5(也即是最后一个)
                    都视为正常播放
                   */
                  if (ds1 == ds2 + 1 || (ds2 == 5 && ds1 == 0)) {
                    cnt += 1;
                  }
                  /*非正常播放:正常播放时,用户点击了某一个点*/
                  if (
                    (ds1 > ds2 && ds1 - ds2 != 1) ||
                    (ds1 < ds2 && ds2 - ds1 != 5)
                  ) {
                    cnt = cnt + ds1 - ds2;
                  }
                  //如果点击正在播放的点
                  if (ds1 == ds2) {
                    cnt = cnt;
                  }
                } else {
                  cnt += 1; //当播放点不足两个的时候
                }
              }
            });
            //添加圆点底下显示的数据
            axios.get("../data/data_pro_ed.json").then((res) => {
            ...//数据渲染
            });
          }, 1000);
        } else if (play_cnt === 1) {
          //播放完后play_cnt = 1
          window.location.reload(); //重新加载页面
        }
      });
    
      //点击暂停按钮事件
      $(".time-line").on("click", ".time-pause", function () {
        $(this).removeClass("time-pause").addClass("time-play");
        clearInterval(timer); //清除定时器
      });
    
      //点击某个时间点时触发事件
      $timeLi.not(":first-child").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
      });
    }
    

    因为是动态的,最终效果就不展示了。

    4.总结

    写逻辑的时候,一定要心无旁骛,否则就会越写越乱,越写越烦,结果就是钻牛角尖。

    写完这个动态播放,感觉自己又行了,加油!!!

    展开全文
  • 题目:请用原生js将如下数据结构转化为对应table,渲染在div.container中 数据结构为: let tableData = { thead: ['头部1','头部2'], tbody: [ [10,10], [9,5], [8,10], [7,10] ] } 希望渲染成下图的结构...

    题目:请用原生js将如下数据结构转化为对应table,渲染在div.container中
    数据结构为:

    let tableData = {
      thead: ['头部1''头部2'],
      tbody: [
        [10,10],
        [9,5],
        [8,10],
        [7,10]
      ]
    }
    

    希望渲染成下图的结构,并且点击头部,将对应列的数据进行排序显示(升序,降序依次交替)
    在这里插入图片描述

    代码实现如下:

    <script>
        let tableData = {
          thead: ['头部1', '头部2'],
          tbody: [
            [10, 10],
            [9, 5],
            [8, 10],
            [7, 10]
          ]
        }
        let flag = true;//点击头部的升序降序排列标志
        let container = document.getElementById('container');
        let table = document.createElement('table');
        container.appendChild(table);
        table.setAttribute('border', '1px');
        table.setAttribute('cellspacing', '0px');
        let thead = document.createElement('thead');
        table.appendChild(thead);
        let tbody = document.createElement('tbody');
        table.appendChild(tbody);
        //渲染头部和tbody,之所以将两个分开渲染是因为下面点击头部要加上点击事件,
        //这样的话,每次就只用渲染tbody部分,不用每次渲染都要给头部加上点击事件
        theadByData(tableData.thead);
        tbodyByData(tableData.tbody);
        //对头部添加点击事件
        let th = document.getElementsByTagName('th')
        for (let j = 0; j < th.length; j++) {
          th[j].onclick = function () {
            console.log(j)
            //根据点击的j,对tableData中的数据进行处理
            let data = sortData(tableData, j)
            //console.log(data)
            tbodyByData(data.tbody)
          }
        }
        function theadByData(data) {
          let str = ''
          str += '<tr>'
          for (let item of data) {
            str += `<th>${item}</th>`
          }
          str += '</tr>'
          thead.innerHTML = str;
        }
        function tbodyByData(data) {
          let str = ''
          for (let item of data) {
            str += '<tr>'
            for (let val of item) {
              str += `<td>${val}</td>`
            }
            str += '</tr>'
          }
          tbody.innerHTML = str;
        }
    
        function sortData(Data, index) {
          let newData = []
          //将要更新的数取出来,进行sort排序,排完序在将数据赋值回去
          for (let val of Data.tbody) {
            newData.push(val[index])
          }
          if (flag) {
            newData = newData.sort((a, b) => a - b)
          } else {
            newData = newData.sort((a, b) => b - a)
          }
          for (let key in Data.tbody) {
            Data.tbody[key][index] = newData[key]
          }
          flag = !flag;
          return Data
        }
      </script>
    

    效果:
    初始渲染:
    在这里插入图片描述
    点击头部1
    在这里插入图片描述
    再次点击头部1
    在这里插入图片描述
    点击头部2
    在这里插入图片描述

    展开全文
  • 原生JS分页

    2018-11-03 18:03:45
    原生JS分页首先我们先捋顺一下分页的思路代码开始先上一下最终的效果图首先写html,写一个table用来显示数据,一个ul用于分页,图:css:动态改变共多少页,第几页页码标签改变效果动态改变当前页码效果上下翻页首页...
  • 在django中,生成一个表格很容易,使用django提供的模板语言即可轻松完成,今天练习下js渲染表格的原生写法。 需求: 动态生成表格,点击删除可删除所在行 姓名 科目 成绩 操作 魏璎珞 数学 100 删除 魏璎珞 数学 ...
  • 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了。 2.问题引入: 当我...
  • 原生JS实现树状结构列表

    千次阅读 2020-07-08 10:42:26
    树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染页面。 ...
  • 描述:原生js开发的一个表格走马灯通用组件,表格表头固定,表体内容可每秒向上滚动一行,(表格内容可通过数组动态循环渲染),表体内容滚动到最后一个时,数据回滚到顶部,重新开始 自下向上 滚动,表体内容展示...
  • 其次,是当页面滚动时 或以其他方法请求数据后,会再次加载数据动态渲染在页面上。 2.瀑布流的原理(以图片为例)  (1)获取页面的可见宽度 var wid = document.body.clientWidth;  (2)创建宽度相等 的x个...
  • 在项目中有这样一个需求:...所以用到了Vue原生api:Vue.nextTick(),在数据改变之后立马在视图里面渲染出来,但是这时还是有问题,因为"swiper-slide"这一项是vue批量生成的,这造成了swiper切换的问题。所以在js...
  • 应用在前端模版系统或则后端JavaScript的环境发布页面,它提供了一套模版语法,用户可以写一个模版区块,每次根据传入的数据生成对应数据产生的Html,渲染不同界面效果;它的优点:愈发简单,学习成本极低,开发效率...
  • this应用详解-js原生

    2018-12-11 18:03:00
    学习记录,以防遗忘,适合新手解惑。老鸟避让!  在微信H5的开发中,很多页面都是简单的一个模型...总计五部分,这样的一个模板写好以后,只需要去刷新(即请求数据库数据),拿到数据后,进行动态渲染,把数据填...
  • 收集了一些比较偏僻的js原生事件和注意点 ...图省事往后原生js全用onclick了哈哈。 动态加载的元素比如说原生ajax请求到的数据后的回调函数中要将动态数据渲染到页面上时插入html代码。 二、pr...
  • 我们一般在渲染页面时会根据给定的数据动态渲染页面。在学习完原生js以及jQuery后,总结如下几种动态生成元素的方法。 接下来我会直接用实例来总结方法!相关知识点可查阅文档。 1.首先是利用原生js的节点操作 ...
  • 然而,如何将数据渲染到html页面上,则有很多方式,可以用模板引擎,可以用php方式,可以用原生js动态添加,方法很多,因此做了一点简单总结。供后续回忆学习使用。 以下源码:一、直接遍历的方式 1、foreach方式 // ...
  • 2.使用vue 插件prerender-spa-plugin插件,但缺点非常明显就是不支持动态数据。就能渲染静态页面。 今天说的是使用第3种。使用Prerender.io 中间件渲染vue.js源码。 原理是判断是否爬虫,如果判断是爬虫,就将在...
  • 最近做的比较多的iview table的多表单渲染【后台返回动态多表头的culomns数据】, 1.采用jquery的table2excel.js 缺点:导出的文件会有提示问题 tableExport(tableId, name, ‘xlsx’) 2.iview table导出 先处理多...
  • 在WEB前端开发中,经常会根据动态数据加载一些具有相同结构、不同内容的HTML控件,如果把这些HTML代码全写入JS中,根据不同的数据显示的控件也...这里有个非常重要的方法,此方法是对原生js的string类进行的扩展,也
  • 2.使用vue 插件prerender-spa-plugin插件,但缺点非常明显就是不支持动态数据。就能渲染静态页面。今天说的是使用第3种。使用http://Prerender.io 中间件渲染vue.js源码。原理是判断是否爬虫,如果判断是爬虫,就将...
  • 模板引擎原生写法

    2019-07-09 22:18:14
    最近刚接触模板引擎,发现模板引擎挺好用的,以前页面的上的数据都是通过静态渲染上去的,模板引擎可以把我们的数据动态渲染到页面上去,用起来也挺方便的,废话不多说了,直接说下模板引擎的原生写法。 模板引擎:...
  • vue里面 fetch和 axios

    2019-08-22 22:52:08
    目的: 是在框架中使用数据请求 vue 渲染数据的方法 回顾: 封装ajax jquery 【 $.get $ .post $.ajax $ .load 】 框架: 数据请求 使用原生js提供的fetch 使用第三方封装库: axios 数据 分成 静态数据 和动态...
  • 快速理解MVVM模式

    2020-10-17 16:38:18
    MVVM M—>Model ...回顾一下原生JS或者jQuery,获取数据渲染到页面上他们需要触发事件对dom进行操作,是面向事件编程 viewmodel负责监听view和model,让他们之间有双向数据绑定的联系,model中
  • 一般通过JS代码操作DOM结构,会触发浏览器进行页面渲染。所以要尽量减少DOM操作,避免频繁的页面渲染对性能造成影响。 如有以下场景:程序执行ajax请求,并根据请求结果动态添加...1) 原生JS代码可以通过创建docu...
  • Vue技术栈高频面试题

    2021-03-16 08:50:38
    Vue技术栈 为什么Vue被称为”渐进框架”? Vue框架本身只关注动态展现数据和与用户交互部分,它本身并不做诸如路由, 状态数据管理, ajax请求等方面, 如果应用功能开发需要, ...1. 使用原生JS, 不使用vue的编码 1). H
  • 再次回顾vue

    2020-05-26 11:05:10
    Vue代码=》vue框架=》原生js代码 4.v-model :指令双向数据绑定 5.v-on(缩写@) 指令用于监听DOM事件 形式如:v-on:click 缩写为 @click; 6.v-bind (缩写 :) 动态地绑定一个或多个特性、或一个组件 prop 到表达式。...

空空如也

空空如也

1 2 3 4
收藏数 70
精华内容 28
关键字:

原生js动态渲染数据