![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
风叶翩翩
有过众多的项目开发经验。精通Java开发,Sql数据库等,熟练使用主流开发工具如IDEA等。对开发编程有着特殊的爱好和恒心。
展开
-
Vue简单日历
使用Vue实现简单的日历。原理分析:1.获取当前时间2.显示当前时间3.点击增加和减少月份4.大月和小月的天数效果演示初始样式(显示现在的日期时间)增加一个月在程序开始之前一定注意:引入Vue.js架包代码演示Body内容<script type="text/x-template" id="calendar"> <!-- 年份-->...原创 2019-11-29 15:45:51 · 619 阅读 · 0 评论 -
备忘录
用Vue实现备忘录功能。程序分析:1.显示时间2.添加内容3.删除内容4.修改内容5.双向绑定效果演示初始样式点击修改显示内容出现在输入框中修改之后点击完成点击删除看了上述效果有没有心动的感觉呢???在程序开始之前请注意:引入Vue.js架包代码演示1.body内容<!DOCTYPE html><html> <head&g...原创 2019-11-28 15:51:34 · 154 阅读 · 0 评论 -
内容添加列表
在输入框输入内容点击Enter按钮时你输入的内容会显示到下方列表中,并且会在内容之后显示出添加的时间。效果演示初始样式输入内容按Enter添加到列表在程序开始之前请注意:一定要引入Vue.js架包代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-11-28 09:04:55 · 515 阅读 · 0 评论 -
Vue 过滤数据
利用hash过滤数据。效果演示初始样式点击将三种字体分别设置为相对应的颜色,使用hash过滤器,不管点击那个颜色的字体时都会显示成红色。在开始我们的代码之前请注意:引入Vue.js架包代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-11-28 08:57:27 · 482 阅读 · 0 评论 -
Vue 数字时钟
用Vue写了一个简单的时间钟。此时钟内容包括年月日及星期和时分秒。功能分析:1.年份,日期,时间的显示2.动态的变化3.获取本地时间方法效果图演示代码演示注意:引入vue.min.js架包<script src="js/vue.min.js"></script>CSS样式<script src="js/vue.min.js"></...原创 2019-11-22 10:21:35 · 5214 阅读 · 0 评论 -
Vue 动态数据滚动
使用Vue动态滚动(上下滚动)显示将要展示的讯息。代码分析:1.设置固定样式的框架内容2.设置红色字体内容是动态变化的3.滚动效果为向上滚动效果演示:此效果图的数据是不停滚动变化的第二张效果图代码演示:注意:引入vue.min.js架包CSS样式<style>div, ul, li, span, img { margin: 0; padding: 0...原创 2019-11-22 09:55:19 · 1766 阅读 · 0 评论 -
Vue商品添加到购物车
用Vue实现把商品添加到购物车然后计算购物车里商品总金额。功能分析:1.商品添加到购物车2.购物车显示商品的名称数量价格3.计算购物车商品的总金额4.删除购物车商品效果演示原始样式添加商品增加商品数量下面向大家展示一下实现的过程。代码演示注意:引入Vue.js架包总体代码<!DOCTYPE html><html lang="en">...原创 2019-11-18 09:53:45 · 7246 阅读 · 0 评论 -
Vue 购物车案例
用Vue实现购物车。程序详解:页面要显示商品的基本信息(编号,名称,单价,购买数量,总价等)1.增加和减少商品数量2.商品金额会随数量变化3.会自动计算总金额4.对某一类商品进行移除操作5.还有清空购物车效果演示原始样式增加iphone5s和macbook的数量都为5则总价随之变化移除iphone5s这一类商品点击清空购物车按钮看了上面的演示有没有心动的感觉呢??...原创 2019-11-17 17:32:07 · 767 阅读 · 0 评论 -
Vue 选项卡效果
用Vue实现选项卡效果。效果演示点击CSS点击Vue看起来是不是有点菜单导航的感觉,下面跟随我一起来一探究竟?代码演示**注意:**引入Vue.js架包<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Vue选项卡...原创 2019-11-16 20:22:20 · 316 阅读 · 0 评论 -
Vue 筛选
对数据进行筛选功能。**功能分析:**当你输入一串文字时,以最快的速度筛选出相对应的内容,如果没有对应的内容则不予显示。效果演示原始样式在输入框输入平板时筛选相应的内容代码演示**注意:**引入Vue.js架包<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2019-11-16 20:04:32 · 487 阅读 · 0 评论 -
Vue 金额计算
使用Vue计算商品金额。**功能分析:**输入商品单价和商品数量,设置固定的运费价格,直接会显示商品总价格。效果演示原始样式(我设置的运费是10)输入商品单价和价格代码演示**注意:**引入Vue.js架包<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...原创 2019-11-16 19:54:25 · 2679 阅读 · 1 评论 -
Vue 跑马灯
Vue 实现跑马灯的效果。效果图**功能讲解:**当点击开始按钮,跑马灯效果开始进行,文字滚动消失和显示,循环滚动,点击停止按钮,文字不再滚动,停留在当时显示的文字页面。代码演示<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Title&l...原创 2019-11-16 17:30:42 · 585 阅读 · 0 评论 -
Vue 双向绑定小案例
用Vue实现双向绑定的小案例。**双向绑定:**使用了双向绑定的两个内容一定是完全一样,同时变化(同增同减)效果图原始样式删除输入框内容上面显示的文本内容随之减少在下面输入框输入内容上面显示的内容也会增加**注意:**在你写代码之前一定要引入Vue.js架包代码演示<!DOCTYPE html><html> <head> <me...原创 2019-11-16 17:13:25 · 270 阅读 · 0 评论 -
Vue 滑动验证
用Vue实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过。程序分析鼠标的点击滑块的拖动未验证之前滑动条上显示的文字滑块箭头指向Vue函数判断是否拖动完毕拖动完毕时改变背景色并显示验证成功效果图演示原始状态点击之后拖动拖动完毕有没有感觉很奇妙的呢???在欣赏代码之前准备工作要做好的!!!**特别注意:**相关架包的引入(三个架包) <scr...原创 2019-11-10 21:46:26 · 1796 阅读 · 2 评论 -
Vue的安装和配置
Vue是目前最流行的前端框架之一,给大家讲一下如何安装和配置Vue环境。网上也有许多关于安装和配置Vue的教程,但是他们的方法太过于麻烦了,而且对于初学者来说对网上的一些安装和配置Vue的方法不理解,看了之后还是没有一点思绪,我总结了一种最简单的Vue安装和配置的方法给大家参考使用。Vue安装的方法方法一:使用本地文件安装引入1.登陆Vue.js官网2. 下载名为 vue.min.js的...原创 2019-11-01 13:07:49 · 333 阅读 · 0 评论