虽然Vue最强大的是组件化开发，但是其实多页面开发也蛮适合的。下面小编给大家分享vue实现仿淘宝结账页面实例代码，具体内容大家参考下本文。 这个demo，是小编基于之前的 vue2.0在table中实现全选和反选 文章进行更新后的demo，主要功能呢，是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面，具体页面效果请看下面的动图：（如果大家发现有什么问题请及时提出帮小颖改正错误呦，谢谢啦嘻嘻） 效果图：更新后的home.vue <...
介绍 ThinkJS 是一款面向未来开发的 Node.js 框架，整合了大量的项目最佳实践，让企业级开发变得如此简单、高效。从 3.0 开始，框架底层基于 Koa 2.x 实现，兼容 Koa 的所有功能。 特性 基于 Koa 2.x，兼容 middleware内核小巧，支持 Extend、Adapter 等插件方式性能优异，单元测试覆盖程度高内置自动编译、自动更新机制，方便快速开发使用更优雅的 async/await 处理异步问题，不再支持 */yield从 3.2 开始支持 TypeScript架构thin...
昨天朋友问我怎么用js实现分页浏览横向图片功能，其实实现代码很简单的，下面小编给大家带来了具体实现代码，代码如下所示： common.js function $(id) { return document.getElementById(id); } function $_tag(tag) { return document.getElementsByTagName(tag); } index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { cursor: pointer; } .div1 { width: 41...
废话不多说了，直接给大家贴代码了，具体代码如下所述： <!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮启用和禁用</title> <script type="text/javascript"> function btn1() {document.getElementById("btn1").disabled=true;document.getElementById("btn1").innerHTML="禁用按钮1";document.getElementById("btn2").disabled=false;document.getElementById("btn2").innerHTML="启用按钮2";}//按钮2 funct...
1.新建componentA.vue组件，代码如下： store.js代码如下： const STORAGE_KEY = todos-vue.js export default{fetch(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || [])},save(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));} }App.vue代码如下： <template><div id="app"><h1 v-text="title"></h1><input v-model="newItem" v-on:keyup.enter="addNew"/><ul><li v-for="item in it...
现在有一个使用mybatis的分页插件生成的table，table中数据是通过vue获得的 ， 前台显示使用<tr v-for="item in items"> 后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model /*** 分页控件加载* @param data*/ function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) {var pageDataShow = $("#"+pageDataShow);var pageModule = $("#"+pageModule);pageDataShow.empty();pageMod...
swiper的组件 <template><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt=""></div><!--<div class="swiper-slide" v-for="item in test"><img :src="item.room_src" alt=""></div>--></div></div> </template> <script>import Swiper from swiperexport default {name: swiper,data() {return {mySwiper: null, // test: [ // ...
实现效果演示：实现代码及注释： <!DOCTYPE html> <html> <head><title>楼层跳跃式的页面布局</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}body, html{height: 100%;}ul{list-style: none;height: 100%;}ul li{height: 100%;}ol{list-style: none;position: fixed;top:200px;left: 50px;}ol li{width: 50px;height: 50px;border: 1px solid #000;text-align: center;line-height: 50px;margin-t...
本文实例为大家分享了JS返回顶部实例代码，供大家参考，具体内容如下 html/css部分 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="返回顶部效果.js"></script> <style>.container{width:1190px;margin: 0px auto;}.container a{display: none;width:40px;height:40px;background: url(/535e0dc100010e9c00400080.jpg) no-repeat;position: fixed;left:95%;bottom: 50px;}.co...
一、先看看效果。二、做此插件的原因。1.数据量过大（几千、几万条），无法一次性全部加载。2.现有插件各不相同，无法满足功能需求。3.美观性，可控性不足。 三、如何使用。1.html和js<select id="unit"></select><script type="text/javascript" src="/demo/thirdparty/jquery/jquery-1.8.3.min.js"></script><script src="/demo/thirdparty/pheker/ajaxselect.js"></script> 2.实例。 # 使用实例var initUrl = "/demo/define...
大部分网页默认的背景色为白色，个人感觉比较刺眼，于是写了个JS的脚本去改变body部分的背景色，代码如下： // ==UserScript== // @name ChangeBackgroundColor // @namespace tingl // @include * // @version 1 // @grant none // ==/UserScript== (function () {use strict;var color = #ececec;var style;function createStyle() {style = document.createElement(style);style.type = text/css;style.innerHTML = ...
最近项目需要头像裁剪的功能，在网上找了一下，发现了github上的cropper项目还不错，借鉴了一下。。用起来挺简单的，下面是我做的一个小例子： 开始先放个成品图：下面给出前后端的代码 前端页面是一个单独的jsp页面，用来做弹出层来裁剪图片比较好。 关于jsp页面引用的两个关于cropper的 文件，我就不提供了。大家需要的可以去官方的github上去下载。 地址：https://github.com/fengyuanchen/cropper <%@ page language="java" co...
最近公司的项目中要做一个树形表格，因为之前一直在用ztree实现基本的树形结构，理所当然的首先想到利用ztree来做。 网上找了一下别人做的树形表格，有使用ztree的，也有使用treeTable的，但效果都不太好，于是参考使用ztree的做法自己做了一个，贴出来供大家参考，请看注释说明，效果如下所示。<!DOCTYPE HTML> <html><head><link href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="extern...
前言 众所周知作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效果做了出来，并且还发现一些容易犯错的地方。话不多说了，来一起看看详细的介绍吧。 先上效果图：实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节：（1）首先需要告诉渲染器我需要阴影，你给我生成阴影： renderer.s...
关于vue2.0的事件发射和接收，大家都知道$dispatch和$broadcast在vue2.0已经被弃用了，取而代之的是更加方便快捷的方式，使用事件中心，组件通过它来互相通信，不管组件在哪一个层都可以通过实例化一个空Vue来实现。上案例： 这是自己写的一个小案例，功能就是点击子组件的加减按钮控制...