VUE
M_SSY
菜鸟一个,平常会写一些小例子,我真是一个小可爱啊
展开
-
点击页面随机生成不同颜色的点点
<template> <div @click="setRandom($event)">这是about页面 <span ref="circle" class="circle" :style='style'></span> </div></template><script> export default { data() { return { style: {} .原创 2021-01-05 16:55:19 · 367 阅读 · 0 评论 -
mint-ui 写一个下拉滑动选择,mt-popup和mt-picker结合使用
<div @click="getpopupVisible">产品选择</div> <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom"> <div class="picker-toolba...原创 2020-04-17 10:44:31 · 2208 阅读 · 1 评论 -
vue 移动端仿hover事件
vue2.0的移动端的touch事件touch的开始事件是@touchstart,移动过程是@touchmove,结束事件是@touchend模仿hover效果,在PC端就是鼠标移入移出的效果,在移动端就是手指按下开始和结束的过程,上代码<input class="immediately-btn" :class="{touchColor:whether}" type="...原创 2018-12-05 17:50:13 · 6201 阅读 · 0 评论 -
vue 点击进入一个页面,返回跳转到之前的位置
scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) { from.meta.savedPosition = document.body.scrollTo...原创 2019-02-01 09:52:19 · 5055 阅读 · 3 评论 -
vue 获取当前日期的第二天
<span v-text="timeNow"></span>data里面:timeNow:''mounted里面: mounted:function(){ var myDate = new Date(); myDate.setDate(myDate.getDate() + 1); console.log(myDate.toLo...原创 2019-01-22 16:12:11 · 5795 阅读 · 2 评论 -
校验身份证号码
自己封装的js,直接引用,放进vue里面需要export导入/** * 身份证校验算法 */ export function SFID(card) { var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古", 21:"辽宁",22:"吉林",23:"黑龙江",31:&原创 2019-02-02 13:49:09 · 680 阅读 · 0 评论 -
通过身份证号获取出生日期和性别
export function IdCard(UUserCard, num) { // console.log(UUserCard) if(num == 1) { //获取出生日期 var birth = UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.sub...原创 2019-02-02 13:50:24 · 1964 阅读 · 0 评论 -
mint-ui 时间范围,限制时间两个月
要求生效日期为次日零时起生效,最晚指定生效日期为从投保日算起的地60天<span class="orange1" v-text="timeNow" @click="openPicker('picker')"></span><div @touchmove.prevent> <mt-datetime-picker v-model=&quo原创 2019-01-28 16:51:46 · 1552 阅读 · 0 评论 -
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容
template里面: <!-- tab切换star --> <ul class="tab-list" :class="{fixTitle:whether}"> <li @click="curId=0" :class="{'cur':curId===0}">产品特点</li>原创 2019-01-23 09:57:48 · 8286 阅读 · 0 评论 -
vue v-for循环出多个select,select取值(select有默认选项)
<ul> <li v-for="item in list" > {{item.name}} <select @change="changea($event)"> <option value="" disabled selected>必选</option> ...原创 2019-03-21 14:04:57 · 22915 阅读 · 2 评论 -
sessionStorage存储数据和取数据
sessionStorage存数据,如果刷新页面,数据仍旧存在,只有关闭页面,数据才消失sessionStorage存储一条数据:sessionStorage.setItem('name',this.insuredOneName);sessionStorage存储多条数据:this.queryParams={name:this.insuredOneName,id:this....原创 2019-03-28 10:20:28 · 5376 阅读 · 0 评论 -
vue 获取短信验证码
<!-- 获取验证码倒计时60s --> <div class="input-div"> <button @click="getCode(formData)" class="code-btn" :disabled="!show"> <s...原创 2019-04-17 15:20:51 · 1880 阅读 · 8 评论 -
vue动态改变title
一般写title会在index.html里的head标签title元素里面写可以根据路由写title首先要安装cnpm install vue-wechat-title --saveexport default new Router({ routes: [ { path: '/', name: 'Home', component:...原创 2019-05-20 15:10:30 · 1878 阅读 · 0 评论 -
vue 点击小眼睛密码显示隐藏
<li> <span class="icon password-icon">新密码:</span> <input :type="pwdType" placeholder="请输入新密码" @on-change="userPassword" maxlength="18" v-model="userPassword" @blur="getU...原创 2019-06-28 16:19:20 · 6241 阅读 · 5 评论 -
mint-ui toast提示窗
用mint-ui做了一个简单的项目,下面简单的总结一下toast三种提示窗:1.messagebox弹窗 this.$messagebox({ title: "温馨提示", message: "请选择续费银行", showConfirmButton: true });2.提示窗,定时关闭t...原创 2018-11-22 15:30:50 · 8332 阅读 · 0 评论 -
在vue中使用mint-ui的radio单选
<mt-radio v-model="duration" :options= options align="right"></mt-radio>align="right"表示单选在文字的右边,有left和right两个属性获取单选的value值和label值:watch:{ duration(newval,oldval){ for(va...原创 2018-11-06 14:42:02 · 3915 阅读 · 0 评论 -
vue的mouseover 不起作用
mouseover 类似hover,鼠标移入移出显示隐藏@mouseover="toggleShow()"和@mouseout="toggleShow()"不起作用,改为@mouseover.native="toggleShow()" 和@mouseout.native="toggleShow()"原创 2018-09-25 15:35:59 · 17866 阅读 · 0 评论 -
vue项目打包在本地直接访问
1.打开项目文件夹。找到config文件夹里的index.js文件中的build对象,将assetsPublicPath中的“/”,改为“./”。 2.router文件下面的index.js路由配置文件不要配置mode: "history"(不用配置这个属性) 3.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(t...原创 2018-09-26 10:53:02 · 11472 阅读 · 0 评论 -
vue输入框限制字数,达到100字禁止输入
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</t原创 2018-09-26 11:02:30 · 10627 阅读 · 3 评论 -
vue输入框禁止输入,字体颜色被覆盖问题
input[disabled],input:disabled,input.disabled{ color: #999; -webkit-text-fill-color:#999; -webkit-opacity:1; opacity: 1; }原创 2018-09-26 11:03:22 · 2442 阅读 · 0 评论 -
vue mint-ui 的弹窗
this.$messagebox({ title: '温馨提示', message: '订单支付成功', showCancelButton: true, confirmButtonText:"继续购物", cancelButtonText:"查看订单" }).then(action...原创 2018-09-26 11:04:13 · 2614 阅读 · 0 评论 -
解决VUE路由跳转到第二页位置不在顶部问题
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}原创 2018-09-26 11:06:29 · 3027 阅读 · 0 评论 -
vue select默认有选中状态的内容
<select name="" id="" v-model="selected" @change="changeIndex(indexs)"> <option v-for="(item, index) in lists" :key="index" :value="getText(item,index)" :indexs原创 2018-09-27 10:47:09 · 3747 阅读 · 0 评论 -
vue kepp-alive实践总结
HelloWorld跳转到pageTwo页面,然后返回HelloWorld页面时想要保存之前操作的状态,首先要在App.vue中用<keep-alive></keep-alive>将内容包起来,然后在router.js中设置...原创 2018-09-27 16:11:12 · 588 阅读 · 0 评论 -
element-ui的el-date-picker组件获取值
第一种直接获取中国标准时间: <div class="block"> <span class="demonstration">选择日期</span> <el-date-picker @change="selectTime" v-model="value1"原创 2018-09-28 13:58:22 · 23091 阅读 · 4 评论 -
element-ui的el-select下拉框获取值
<el-form ref="form" :model="form" style="width:300px;margin:0 auto;"> <el-form-item label="名字"> <el-select @change="selectGet" v-model="form.region原创 2018-09-28 14:15:56 · 25341 阅读 · 3 评论 -
vue写一个简单的头部导航样式切换
<template> <div class="tab-head"> <ul class="tab-list"> <li v-for="(item,index) in tabList" v-on:click="addClass(index)" v-bind:class="{ active:inde原创 2018-09-29 14:31:08 · 4659 阅读 · 0 评论 -
vue获取当前点击对象的下标,和当前点击对象的内容
<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>data里面声明:data() { return { tabList: [ { id: 0, title: "首页1" }, ...原创 2018-09-29 14:56:39 · 15420 阅读 · 0 评论 -
vue 动态添加class
第一步:<div class="noticePage" :class="{fixTitle:whether}"></div>fixTitle是当达到某种条件时动态添加的class名,whether是判断是否第二步:在data里面 data(){ return{ whether:false } }第三步:在...原创 2018-10-10 11:56:30 · 5231 阅读 · 0 评论 -
vue---------toggle class切换单选多选class切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .app { width: 300px; margi原创 2018-07-03 11:10:40 · 1173 阅读 · 0 评论