vue自定义进度条的制作方法(含css属性值的两种动态改变方式)

雏形部分接上一篇文章:https://blog.csdn.net/ColourfulTiger/article/details/82910505 结合vue制作自定义的进度条,优势在于采用了vue特有的样式绑定,与双向绑定的方法,达到数据与进度条的进度一致。 突破点:通过变量来动态改变属性对应...

2018-09-30 17:47:27

阅读数:88

评论数:0

vue 中引用字体图标的方式

1、全局安装font-awesome cnpm install font-awesome --save-dev 2、main.js中引入      import 'font-awesome/css/font-awesome.min.css' 3、在相关文件中使用 <...

2018-09-30 16:18:17

阅读数:60

评论数:0

进度条制作

简单描述一下小例子: 这个进度条是可以通过js控制的,即点击按钮触发函数,动态的改变百分比的值与进度条的状态。当超过100%时,不再响应,按钮禁用。 html部分: <div class="progress-bar"&amp...

2018-09-30 16:06:14

阅读数:44

评论数:0

textarea高度自适应函数

在实现textarea根据内容的增多实现高度自适应,且无滚动条的效果,方法有2种。 第一种方法:通过事件onkeyup来实现这样的效果 备注:onkeyup事件发生阶段           1、onkeyup事件会在键盘按键被松开时发生;           2、与onkeyup事件相关的...

2018-09-24 13:51:37

阅读数:61

评论数:0

前端页面试题答题区遇到()实现换行的方式

  在一些题库系统中,很容易遇到分条作答的现象,当大量的答案都只通过一段话显示在一起的时候,很难让人分清楚条理,关键字也不明显,很容易出现错判断的现象,而通过括号大段的在一起也很难看,那么怎样才能实现分条作答的页面呢? 思路如下: 1、给出规范,如遇到()代表答案内容中的一条; 2、推测特...

2018-09-23 22:35:04

阅读数:33

评论数:0

父组件操作子组件的方式

1、子组件 <template> <div class=""> {{form}} </div> &lt...

2018-09-23 22:23:59

阅读数:28

评论数:0

js的回调函数使用

源码见地址:https://download.csdn.net/download/colourfultiger/10673643 html部分 <div class="box"> <d...

2018-09-18 12:41:49

阅读数:44

评论数:0

css动画遮罩效果自上而下与自下而上

基本结构 <div class="header"> <div class="inner"> <a h...

2018-09-07 12:40:19

阅读数:135

评论数:0

vue环境使用scss来写css样式

1、在本建立vue项目的文件下打开命令窗口 2、输入: cnpm install sass-loader node-sass vue-style-loader --D 下载 3、打开项目文件下的build文件,找到webpack-base-conf.js文件,配置以下内容即可 module...

2018-09-06 17:39:47

阅读数:97

评论数:0

vue环境下一个主页面引入多个子组件的方法

通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现“按需“引入呢? 1、常见的引入单个vue文件的写法:import Header from '@/view/layout/Header';   2、实现”按需“引入的写法: ”按需“引入多个vue文件的写法:impo...

2018-09-06 12:37:24

阅读数:814

评论数:0

多个css文件在同一个html中的执行顺序2

1、文件位置在head里面引入,无 !important 时  或 文件位置在body里面引入,无 !important 时        按照从上到下的顺序依次执行,同一样式会选择最后一个文件里面的渲染[就近原则]。        若想实现自己的样式最先,文件在head或body里面引入,都...

2018-09-03 10:14:06

阅读数:72

评论数:0

引入style的位置在head里与在body里的区别1

在使用css的时候少不了会在某一html页面通过style标签写自己的样式,但是在html页面中将style的内容放置在head和body里面有什么区别呢? 1、打开head里面的style,关闭body里面的style <!DOCTYPE html&g...

2018-09-03 09:44:27

阅读数:68

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭