虽然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来实现。上案例: 这是自己写的一个小案例,功能就是点击子组件的加减按钮控制...