- 博客(24)
- 收藏
- 关注
RSS订阅原创 监听器的使用
watchwatch: { title(newval, oldval) { console.log(newval, oldval); var res = this.books.some((item) => { return item.title == newval; }); this.subflag = res; }, .
2020-08-28 18:57:43
211
原创 对标题的局部过滤
局部过滤filters: { filtitle(value) { return "《" + value + "》"; }, //局部的过滤器 给所有的title加上书名号 },
2020-08-28 18:53:14
139
原创 时间的全局过滤
全剧过滤 Vue.filter("timeformat", (value) => { // console.log(value); // 2020-8-28 8:16:20 var time = new Date(value); var year = time.getFullYear(); var month = time.getMonth() + 1; var date = time.getDate.
2020-08-28 18:48:01
156
原创 点击隔行变色
css代码<style> .select1 { background: #ccc; } .select2 { background: pink; } </style>html代码 <div v-for="i in 10" @click="change(i)" :class="flag==i?bg:''">{{i}}</div> <!-- 点.
2020-08-28 10:55:11
206
原创 点击变色
css代码<style> .select { background: #ccc; } </style>html代码<div v-for="i in 10" @click="change(i)" :class="flag==i?'select':''"> {{i}} </div> <!-- 点击事件把当前点击的div的下标保存下来，如果这个div是当前点.
2020-08-28 10:51:50
375
原创 计算器
html代码 <input type="text" v-model.number="num1" /> <select name="" id="" v-model="flag"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option>.
2020-08-28 10:48:13
122
原创 购物车滑动商品卡片
template代码<!-- 第一层 复选框 --> <van-checkbox-group v-model="result"> <!-- 第二层 滑动单元格 --> <van-swipe-cell v-for="(item, index) in goods" :key="index"> <!-- 第三层 布局 --> <van-row> .
2020-08-26 14:28:51
148
原创 倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
2020-08-22 16:26:18
86
原创 购物车抛物线实现效果
html代码<template> <div class="demo"> <!-- <div class="addBtn" @click="addGoods"></div> --> <van-card price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" .
2020-08-21 10:37:37
136
原创 vue 实现购物车小球动画效果
html代码<template> <div class="card-body"> <!-- 商品卡片 --> <div class="goods-card"> <div class="goods-img"> <img :src="imgurl"> </div> <div class="goods-title">{{title}}</
2020-08-21 10:32:07
305
原创 css样式总结
颜色属性background-linear-gradient 渐变色；rgb 三原色 可改；rgba 透明色 最后一个值设置为0.5以下可以变成半透明状态；文字样式属性：字体加粗：font-weight：900；【normal bold lighter】(不能加单位)font-weight：bold；字体倾斜：font-style：italic；字体正常：font-style：normal；字体大小：font-size；字体颜色：color；字体的样式：font-farmily...
2020-08-16 19:49:31
99
原创 常用的css样式
position定位：relative //相对定位absolute //绝对定位fixed // 固定定位static // 静态定位
2020-08-16 19:47:52
64
原创 浮动的清除
clear:left | right | both;1、给父元素设置高度2、给父元素添加overflow：hidden属性3、利用伪类选择器.cls{}.cls:after{clear:both;(清除浮动)height：0px；（高度为0）content："";(内容为空)display：block；（转换为块元素）visibility：hidden；（隐藏）}...
2020-08-16 19:31:27
96
原创 响应式布局如何实现
响应式布局实现有以下几种百分比布局利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的使用媒体查询 (CSS3 @media 查询)利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕，三个不同分辨率下显示对应的背景色。媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分
2020-08-13 17:42:33
192
原创 跨域的解决方式有哪些？
跨域的解决方式有哪些？跨域的解决方案目前有三种主流解决方案：是 jsonpjsonp 实现原理：主要是利用动态创建 script 标签请求后端接口地址，然后传递 callback 参数，后端接收 callback，后端经过数据处理，返回 callback 函数调用的形式，callback 中的参数就是 json优点：浏览器兼容性好，缺点：只支持 get 请求方式是代理（前端代理和后端通常通过 nginx 实现反向代理）前端代理我在vue 中主要是通过vue 脚手架中的config 中的inde
2020-08-13 12:22:28
565
原创 什么是跨域，以及jsonp的原理?
什么是跨域，以及jsonp的原理?1、理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域2、出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js 脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的jsonp原理。...
2020-08-13 12:18:07
185
原创 路由导航守卫有几种，如何实现
路由导航守卫有几种，如何实现一、全局路由守卫所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫router.beforeEach((to, from, next) => { console.log(to) => // 到哪个页面去？ console.log(from) => // 从哪个页面来？ next() => // 一个回调函数}router.afte
2020-08-13 12:05:42
2062
原创 vue 生命周期
vue 生命周期beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问 methods， data， computed 等上的方法和数据。created ( 创建后）实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event 事件回调，完成了 data 数据的初始化，el 没有。然而，挂在阶段还没有开始, $el 属性目前不可见，这是一个常用的生
2020-08-13 12:01:06
142
原创 vue 中 key 的作用
vue 中 key 的作用key 值:用于管理可复用的元素。因为 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快,但是这样也不总是符合实际需求。 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 是必须的。”...
2020-08-13 11:24:47
147
原创 如何实现Iscorll
IScroll的初始化 style样式 .box{ height:500px;} .content{height:501px} 1.html代码 <div class="box"> <div class="content"> 滚动内容 </div> </div> 2.js代码 var mm=new IScroll(".box",{})
2020-08-12 19:28:42
89
原创 谷歌滑动不起作用
谷歌滑动不起作用// 问题所在，简单来说就是谷歌浏览器的统一指针事件所致 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false // passive 消极的 为假，就理解为积极地，滑动高更流畅 })...
2020-08-12 19:25:33
813
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人