vue
关注
分享
扫一扫
supper李
这个作者很懒，什么都没留下…
展开
-
动态绑定class的方法
1.最简单的是class声明多个固定类名：<div class='item active'></div>2.对象方法是实现动态class（1）一个class的：<div :class="{'active':isopen}"></div><div :class="{'active':isopen == 1}"></div>多个class的：（2）多个class的：<div :class="{'active':is原创 2022-04-25 11:13:47 · 6380 阅读 · 0 评论 -
vue多页面入口配置
*index.html(主页\项目入口）,app.vue(根组件)，main.js(文件入口的配置)1.进行项目入口的配置在public下面，复制index.html修改文件名（里面内容可以不变）<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-03-31 10:19:26 · 5065 阅读 · 1 评论 -
css渐变色
CSS渐变色background: -moz-linear-gradient(top, #f76f6f 0%, #c01211 100%);background: -webkit-linear-gradient(top, #f76f6f 0%,#c01211 100%);background: -o-linear-gradient(top, #f76f6f 0%,#c01211 100%);background: -ms-linear-gradient(top, #f76f6f 0%,#c01211原创 2020-08-20 17:29:48 · 218 阅读 · 0 评论 -
css3隐藏滚动条
::-webkit-scrollbar {/隐藏滚轮/display: none;}原创 2020-07-23 14:51:13 · 430 阅读 · 0 评论 -
前端页面调用微信扫一扫功能
前端代码：引入微信对象import wx from '@/plugins/wechat/wechat';主要代码：wxscan() { // 调用扫一扫 const that = this; getWxScan(this.url).then((res) => { // eslint-disable-line this.jsonData = res.data; if (!wx) { return false;原创 2020-07-17 16:49:27 · 1918 阅读 · 0 评论 -
微信中关闭h5页面
window.close()：有时候不生效WeixinJSBridge.call(‘closeWindow’);原创 2020-06-16 21:27:06 · 1432 阅读 · 0 评论 -
vue移动端适配（postcss-pxtorem和amfe-flexible）
一、移动端适配（postcss-pxtorem和amfe-flexible）在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)实现思路：①通过postcss-pxtorem实现将px转成rem，②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件，我们就可以实用设计稿的px来进行开发了。1.安装postcss-pxtorem和amfe-flexibleNpm install postcss-pxtorem --sa原创 2020-06-10 14:40:05 · 2848 阅读 · 1 评论 -
vue中实现60秒倒计时
vue中实现60秒倒计时<span>{{count}} s</span>data中：data(){ return{ show: true, count: '', timer: null, }}methods:{ getCode() { const TIME_COUNT = 60; if (!this.timer) { this.count = TIME_COUNT; this.show =原创 2020-06-10 14:14:39 · 3802 阅读 · 0 评论 -
vue中实现滚动和锚点跳转双向
vue中实现滚动和锚点跳转双向直接上代码：<template> <div> <div class="list"> <ul> <li v-for="(item,index) in title_list" :key="index"> <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'原创 2020-06-02 12:16:19 · 925 阅读 · 0 评论 -
vue项目添加百度统计
vue项目添加百度统计在index.html中head的上面添加script代码：在main.j入口文件中监听路由的改变：// 加入百度统计router.beforeEach((to, from, next) => {if (to.path) {if (window._hmt) {window._hmt.push([’_trackPageview’, ‘/#’ + to.fullPath])}}next()})哦了...原创 2020-05-15 16:24:48 · 290 阅读 · 0 评论 -
vue项目中实现简单的分页效果
vue项目中实现简单的分页效果1.在data中声明数据：data(){return{sel:0,//tab切换news:[],//新闻动态的数据health:[],//健康卫士的数据current:0,uldata:[{name:‘企业动态’,num:0},{name:‘健康贴士’,num:1}],totalPage:1,//总页码数，默认为1currentPage:1,//当前页，默认第一页，pageSize:3,//每页显示的数量currentPageData:[],//当前页显原创 2020-05-15 16:28:38 · 561 阅读 · 0 评论 -
vue动态添加title，（keywords）关键字和description
vue动态添加title，（keywords）关键字和description首先在router下的index.js设置路由routes:[{path:’/home’,component:Home,meta: {title: ‘先农氏-智能无人碾米机’,content:{keywords:‘先农氏,智能碾米机,先农氏智能无人碾米机’,description:‘先农氏智能无人碾米机，中国首台智能无人碾米机，专利产品。拥有先进核心技术，更智能、碾米速度更快，噪音更小，操作更简便，现碾现售。新鲜原创 2020-05-13 16:47:40 · 4168 阅读 · 0 评论 -
vue项目中pc端和移动端的切换
vue项目中pc端和移动端的切换生成两个项目上传到服务器后生成两个域名在每个项目中index.html文件下进行判断原创 2020-05-12 10:27:45 · 2783 阅读 · 0 评论 -
vue中如何动态改变title中的内容
<link rel="icon" href="<%= BASE_URL %>./title16.png">在vue的index.html中这句话是title中的小图标，可以改成自己的图标：注意：图标的位置必须卸载public静态文件目录下，否则在改变title内容时，图标会消失成为默认的图标。要想改变title中的内容，需要在路由文件中，加入meta:{titel:...原创 2020-04-22 16:34:15 · 1874 阅读 · 0 评论 -
vue实现监听滚动条，回到顶部
通过在app.vue中定义一个张图，这样在我们的每一个页面中都会有回到顶部的效果。在data中声明默认滚动条的高为0.以及滚动条是否显示两个数据。写一个方法监听滚动条的高度当高度高于一个值（自定义的值），就显示回到顶部图标，在一个方法如果点击回到顶部后滚动条赋值为0，同时隐藏回到顶部图标。 ...原创 2020-04-22 09:52:26 · 1025 阅读 · 1 评论