- vue-router和锚点冲突问题
TaoLandd
传统的锚点定位会与vue-router中的路由设置存在冲突,都是使用'#'进行的,所以这里使用一直方法来模拟锚点跳转,并使用tween.js达到动态的过度效果不使用原生锚点,使用这种方式解决import'../static/js/animation.js'import'../static/js/tween.js'xxxxmethods:{anchor:function(e){letid='anch
- vue:监听路由的变化
沐子a~
vue.jsjavascript前端
1.vue3import{useRouter}from'vue-router'constrouter=useRouter()//监听当前路由watch(()=>router.currentRoute.value,(newValue:any)=>{console.log('newValue',newValue)},{immediate:true})2.vue2watch:{$route:{handl
- react快速开始项目模板
飞鸟malred
前端react.js前端前端框架
代码仓库gitee创建项目首先保证安装了node,然后使用vite创建项目vitenpmcreatevitereact-learncdreact-learnnpmi目录结构一个完整的前端项目需要:状态管理在全局维护共有的状态(数据),让页面组件之间共享数据,我们使用pinia路由路由让页面之间可以进行跳转,我们使用vue-router样式样式让页面更美观,我们使用tailwindcss网络请求前端
- vue3.0(十六)路由vue-router
程楠楠&M
vue3.0vue.js前端javascripthtml5vue-router
文章目录路由vue-router路由1.vue-router功能2.vue-router组成3.vue-router常用的函数vue-router使用1.安装2.vue3.0配置3.vue2.0配置4.基本用法5.编程式导航6.路由懒加载导航守卫路由的两种工作模式路由路由(routing)路由是指从源页面到目的页面时,决定端到端路径的决策过程。前端路由前端路由即由前端来维护一个路由规则。实现模式有
- html5路由如何在nginx上部署(vite+vue3)
大眼小夫
html5nginx前端
我们知道前端常用的有Hash模式和html5模式的路由,hash模式在nginx上部署不需要额外的操作,而html5模式则需要额外设置,这里介绍下如何在nginx根地址(location/{})下部署和在非根地址上(location/admin{})部署。在这之前,我先说一下为什么html5路由需要在nginx上配置,我们知道,vue-router就是用来处理路由的,我我们在浏览器上输入地址时,这
- Vue3基础(5)——前端路由、vue-router
番大茄子
Vuevue.jsjavascript
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币,点赞,收藏呦,历经5年的反复打磨与锤炼,黑马程序员重磅推出全套最新的Vue2+Vue3基础课程。共计500多集的免费视频,助您轻松掌握前端圈最火的Vue框架!https://www.bilibili.com/video/BV1zq4y1p7ga?p=399&
- 【Element Plus】Menu组件:url访问页面时高亮对应菜单栏
karshey
前端小问题vue.jsjavascript前端
文章目录场景代码解决场景使用ElementPlus的Menu菜单|ElementPlus时,点击对应菜单会显示对应路由,此时会高亮选中菜单栏。但输入url访问对应路径,菜单栏不会默认高亮。需求:url访问页面时高亮对应菜单栏。代码router:import{createRouter,createWebHistory}from'vue-router'exportconstroutes=[{path:
- [vue vue-router]vue3路由获取请求参数
在使用vue路由的时候,比如有一个tab栏,点击tab栏不同的tab切换。在配置二级路由时,不把id写死,作为路由参数站位routes:[{path:'/',component:Layout,children:[{path:'',component:Home},{//此处我们把id作为一个可变id配置path:'/category/:id',component:Category}]},{path:
- 模块自动导入的小工具
qq_46435701
vue.jsjavascript前端
import{ref,reactive,onMounted}from'vue'import{useRoute,useRouter}from'vue-router'项目里很多文件都需要引入这些公共库,比较繁琐,使用一个小工具可以自动导入,就不需要在每个文件里面都写这些导入的代码了。通过命令行下载安装npminstallunplugin-auto-import然后去配置文件去修改配置,由于我目前的项目
- vue3 setup里获取query params路由携带的参数
不知名前端v2
vue前端vue3javascriptvue.js前端
import{useRouter}from'vue-router'setup(){constrouter=useRouter()console.log(router.currentRoute.value.query)console.log(router.currentRoute.value.params)通过router.currentRoute.value里的参数获取//路由跳转router.p
- vue2/3 - 报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a funct
十一猫咪爱养鱼
前端常见问题解决前端组件与功能(开箱即用)vue常见问题解决vue2vue3浏览器控制台报错详细解决vue报错UncaughtTvue__WEBPACK_IMvue-router路由改变路由版本和vue版本还不行
错误描述在vue2|vue3开发,报错:UncaughtTypeError:(0,vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent)isnotafunction,大概率vue-router路由问题(当然也可能是别的原因),浏览器控制台报错报红,页面也可能白屏打不开,意思是“未捕获的类型错误”,vue开发很奇怪的错误,就算换了各种包的版本还是不行,本文
- vue项目,页面刷新就404了
在Vue.js项目中,如果使用了vue-router并且路由模式设置为history模式,那么在刷新页面或直接访问某个路由时,可能会遇到404错误。这是因为history模式下,前端路由的路径并不匹配服务器上的实际路径,导致服务器无法找到对应的资源。解决方案要解决这个问题,需要在服务器配置中将所有请求重定向到index.html,让前端的Vue.js应用接管路由逻辑。1.Nginx配置如果你使用N
- vue3 + ts + vite + element-plus根据url路径保持对应栏目高亮
yskbchewidhw
vue3前端javascripttypescript
上代码:000111222333YzpAction1Action2退出import{ref}from"vue"import{useRouter}from"vue-router"importlogosfrom"@/assets/img/logo.svg"constrouter=useRouter()//img资源constlogo=ref(logos)leturlname=router.curren
- vue3结合element-plus封装ems菜单栏组件
进阶的巨人001
vue.jstypescriptelement-plus后台管理系统
效果如下:ok,开始代码nav-menu.vueVue3+TS{{item.name}}{{subitem.name}}{{item.name}}import{defineComponent,computed,ref}from'vue'import{useStore}from'@/store'import{useRouter,useRoute}from'vue-router'import{path
- Vue 自动导入函数和变量插件 unplugin-auto-import
HarryHY
#vue3.0vue.js前端javascript
安装npmiunplugin-auto-import-Dvite.config文件//引入importViteAutoImprotfrom'unplugin-auto-import/vite';//自动导入常用函数和变量//配置plugins:[ViteAutoImprot({imports:['vue','vue-router'],//自动导入常用函数和变量}),]使用//import{ref.
- 使用Vite构建Vue3项目,对路由Vue Router 4.x的设置
夏日米米茶
web前端Vue3vue-routervue3vite
Vue3官网:https://v3.cn.vuejs.org/Vite官网:https://cn.vitejs.dev/VueRouter官网:https://next.router.vuejs.org/zh/使用Vite构建时,会和以前的有些写法有些不同,例如之前我们使用//导入路由对象importVueRouterfrom'vue-router'//路径配置.vue可以省略constroute
- iframe三方页面嵌入
啊~哈
vue.jsjavascript前端
一、html代码二、拼接urlimport{ref}from"vue";import{getToken}from"@/utils/auth";importdomainfrom"@/utils/http/domain";import{useRoute}from"vue-router";importCryptoJSfrom"crypto-js";constSECRET_KEY="H6uZdDcB8Jb
- Vue2中路由的使用
22x艾克斯
vue.js
vue-router是vue的一个插件库,专门用于SPA(单页面应用)一个路由就是一组映射关系key-value,key是路径,value是组件创建路由表,多级路由需要配置child时不需要写父路径mode:设置路由模式hash:哈希模式,默认模式,当URL改变的时候,页面不会重新加载,在URL中会有#不太美观,当用户刷新页面的时候,如果没有正确的路由匹配,可能会显示404history:可以使用
- vue路由的使用与鉴权
香蕉可乐荷包蛋
vuevue.jsjavascript前端
在Vue项目中,使用vue-router实现路由管理是构建单页应用(SPA)的核心部分。结合鉴权机制可以实现登录验证、权限控制等常见业务需求。文章目录一、VueRouter基本使用1.安装2.配置路由3.挂载到Vue应用4.使用``和``二、路由鉴权实现(登录验证+权限控制)1.路由元信息(meta)2.全局前置守卫(导航守卫)3.动态添加路由(按角色权限加载不同页面)4.组件内守卫(可选)三、完
- 前端(vue)学习笔记(CLASS 6):路由进阶
肥肠可耐的西西公主
vue.js前端学习
1、路由的封装抽离将之前写在main.js文件中的路由配置与规则抽离出来,放置在router/index.js文件中,再将其导入回main.js文件中,即可实现路由的封装抽离例如//index.jsimport{createMemoryHistory,createRouter}from'vue-router'importHisPagefrom'../views/HisPage.vue'import
- 异常解决---Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"}的解决方法
一块小砖头儿
vuevue
最近在使用vue做项目的时候,点击左侧同一个页面(相同路由)会导致报错Uncaught(inpromise)NavigationDuplicated{_name:"NavigationDuplicated",name:"NavigationDuplicated"}解决办法importRouterfrom'vue-router';Vue.use(Router)//添加这下面一段代码,就可以解决报错c
- vue项目部署后部分子页面刷新后403
毛三仙
博客前端
经过我的仔细分析;终于找到了是刷新后路径后面自动拼接了/;如66.66.66.66/aPage刷新后变成了66.66.66.66/aPage/导致403方法一:修改路由为hash模式//router/index.jsimport{createRouter,createWebHistory,createWebHashHistory}from'vue-router'constrouter=create
- uniapp 发布 H5监听路由变化
某公司摸鱼前端
uni-app前端服务器
由于uni.onAppRoute的兼容性问题h5环境下监听路由出了问题解决方案://App.vuewatch:{'$route.meta.pagePath':{handler:function(newVal){//处理}}}没错,也就是Vue-router的route
- vue3-admin商品管理后台项目(登录页开发和功能实现)
mzldustu
vue-admin项目javascriptvue.js前端
今天来实现vue3-admin商品管理后台项目的登录页功能首先在pages文件夹下面添加一个login.vue文件,里面先写入简单的template登录然后在router文件夹下面的Index.js里面编辑,仍然是引入页面配置路由,about页暂时没啥用,只是测试用的,所以就把它删了。import{createRouter,createWebHashHistory}from'vue-router'
- vue-router的详细安装及配置
愚公爱上精卫
vuevue.js前端javascript
目录1、安装路由,2、引入并配置路由3、路由的视图展示4、路由跳转方式以及传递参数5、路由组件独有的两个钩子函数(也称之为生命周期),用于捕获路由组件的激活状态。6、路由的导航守卫1、安装路由,vue给我们提供了路由功能,该包需要单独安装。npminstallvue-router-S如果你的vue版本是2.0+那就要安装vue-router@3版本一下的,因为vue-router@4的版本只适合v
- 新搭建一个 Vue 项目后,我有了这 15 点思考
前端瓶子君
javahtmlvuecssweb
作者:codexuhttps://juejin.cn/post/69014669944789401681.分解需求技术栈考虑到后续招人和现有人员的技术栈,选择Vue作为框架。公司主要业务是GIS和BIM,通常开发一些中大型的系统,所以vue-router和vuex都是必不可少的。放弃了ElementUI选择了AntDesignVue(最近Element好像复活了,麻蛋)。工具库选择lodash。建
- active-class 是哪个组件的属性?
nanzhuhe
前端
active-class属于vue-router的样式方法,当router-link标签被点击时将会应用这个样式一、首先,active-class是什么,active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;相关可查阅文档:https://router.vuejs.org/zh-cn/api/router-link.html二、在vue-ro
- 前端基础之《Vue(12)—插件封装》
csj50
前端基础前端vue
一、插件封装1、在Vue生态中,除了Vue本身,其它所有的与Vue相关的第三方包,都是插件例子:importVueRouterform'vue-router'Vue.use(VueRouter)//注册插件2、如何封装Vue插件(1)第一种写法constPlugin={install(Vue){//dosomething}}(2)第二种写法constPlugin=function(Vue){}3、
- Ant Design Vue3 + TypeScript + Vite 左侧菜单生成
zngfue
vue+typescripttypescriptvue.js
AntDesignVue3提供了Menu组件用于生成左侧菜单,我们可以使用Menu组件来构建左侧菜单。下面是一个示例:DashboardUserProfileListimport{defineComponent}from'vue';import{useRoute}from'vue-router';exportdefaultdefineComponent({setup(){constroute=us
- 下载和初步上手Vue3路由
lh_1254
vue.js前端
一、安装路由bash#使用npm安装npminstallvue-router@4#或使用yarnyarnaddvue-router@4二、路由配置与暴露1.路由配置文件router/index.jsjavascriptimport{createRouter,createWebHistory}from'vue-router'//定义路由数组,每个对象代表一个路由配置constroutes=[{//路
- 如何用ruby来写hadoop的mapreduce并生成jar包
wudixiaotie
mapreduce
ruby来写hadoop的mapreduce,我用的方法是rubydoop。怎么配置环境呢:
1.安装rvm:
不说了 网上有
2.安装ruby:
由于我以前是做ruby的,所以习惯性的先安装了ruby,起码调试起来比jruby快多了。
3.安装jruby:
rvm install jruby然后等待安
- java编程思想 -- 访问控制权限
百合不是茶
java访问控制权限单例模式
访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问
一:包访问权限;
自定义包:
package com.wj.control;
//包
public class Demo {
//定义一个无参的方法
public void DemoPackage(){
System.out.println("调用
- [生物与医学]请审慎食用小龙虾
comsci
生物
现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....
所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质
- org.apache.jasper.JasperException: Unable to compile class for JSP:
商人shang
maven2.2jdk1.8
环境: jdk1.8 maven tomcat7-maven-plugin 2.0
原因: tomcat7-maven-plugin 2.0 不知吃 jdk 1.8,换成 tomcat7-maven-plugin 2.2就行,即
<plugin>
- 你的垃圾你处理掉了吗?GC
oloz
GC
前序:本人菜鸟,此文研究学习来自网络,各位牛牛多指教
1.垃圾收集算法的核心思想
Java语言建立了垃圾收集机制,用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险:因内存垃圾过多而引发的内存耗尽,以及不恰当的内存释放所造成的内存非法引用。
垃圾收集算法的核心思想是:对虚拟机可用内存空间,即堆空间中的对象进行识别
- shiro 和 SESSSION
杨白白
shiro
shiro 在web项目里默认使用的是web容器提供的session,也就是说shiro使用的session是web容器产生的,并不是自己产生的,在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起,这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID,当关闭浏览器,此
- 移动互联网终端 淘宝客如何实现盈利
小桔子
移動客戶端淘客淘寶App
2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元,同比增长100%。而来自移动端的分成达1亿元,其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出,虽然目前阶段PC端对于淘客而言仍旧是盈利的大头,但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机,平板)的加速普及而更加迅猛
- wordpress小工具制作
aichenglong
wordpress小工具
wordpress 使用侧边栏的小工具,很方便调整页面结构
小工具的制作过程
1 在自己的主题文件中新建一个文件夹(如widget),在文件夹中创建一个php(AWP_posts-category.php)
小工具是一个类,想侧边栏一样,还得使用代码注册,他才可以再后台使用,基本的代码一层不变
<?php
class AWP_Post_Category extends WP_Wi
- JS微信分享
AILIKES
js
// 所有功能必须包含在 WeixinApi.ready 中进行
WeixinApi.ready(function(Api) {
// 微信分享的数据
var wxData = {
&nb
- 封装探讨
百合不是茶
JAVA面向对象 封装
//封装 属性 方法 将某些东西包装在一起,通过创建对象或使用静态的方法来调用,称为封装;封装其实就是有选择性地公开或隐藏某些信息,它解决了数据的安全性问题,增加代码的可读性和可维护性
在 Aname类中申明三个属性,将其封装在一个类中:通过对象来调用
例如 1:
//属性 将其设为私有
姓名 name 可以公开
- jquery radio/checkbox change事件不能触发的问题
bijian1013
JavaScriptjquery
我想让radio来控制当前我选择的是机动车还是特种车,如下所示:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
- AngularJS中安全性措施
bijian1013
JavaScriptAngularJS安全性XSRFJSON漏洞
在使用web应用中,安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制,用来防护来自两个常见攻击方向的网络攻击。
一.JSON漏洞
当使用一个GET请求获取JSON数组信息的时候(尤其是当这一信息非常敏感,
- [Maven学习笔记九]Maven发布web项目
bit1129
maven
基于Maven的web项目的标准项目结构
user-project
user-core
user-service
user-web
src
- 【Hive七】Hive用户自定义聚合函数(UDAF)
bit1129
hive
用户自定义聚合函数,用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。
问题:UDF也可以提供输入多个参数然后输出一个结果的运算,比如加法运算add(3,5),add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么?
Double evaluate(Double a, Double b)
- 通过 nginx-lua 给 Nginx 增加 OAuth 支持
ronin47
前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGeek 在过去几年中取得了发展,我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块,比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中,我们使用了几个不同的接口来认证:
&n
- 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法
bsr1983
session
在利用tomcat-redis-session-manager做session同步时,遇到了在session保存一个自定义对象时,修改该对象中的某个属性,session未进行序列化,属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明: Session Change Tracking
As noted in the &qu
- 《代码大全》表驱动法-Table Driven Approach-1
bylijinnan
java算法
关于Table Driven Approach的一篇非常好的文章:
http://www.codeproject.com/Articles/42732/Table-driven-Approach
package com.ljn.base;
import java.util.Random;
public class TableDriven {
public
- Sybase封锁原理
chicony
Sybase
昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定,不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据,因此立马着手解决该表的解锁问题。 无奈此前没有接触过Sybase IQ12.7这套数据库产品,加之当时已属于下班时间无法求助于支持人员支持,因此只有借助搜索引擎强大的
- java异常处理机制
CrazyMizzz
java
java异常关键字有以下几个,分别为 try catch final throw throws
他们的定义分别为
try: Opening exception-handling statement.
catch: Captures the exception.
finally: Runs its code before terminating
- hive 数据插入DML语法汇总
daizj
hiveDML数据插入
Hive的数据插入DML语法汇总1、Loading files into tables语法:1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释:1)、上面命令执行环境为hive客户端环境下: hive>l
- 工厂设计模式
dcj3sjt126com
设计模式
使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式
工厂模式(Factory)允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。
Example #1 调用工厂方法(带参数)
<?phpclass Example{
- mysql字符串查找函数
dcj3sjt126com
mysql
FIND_IN_SET(str,strlist)
假如字符串str 在由N 子链组成的字符串列表strlist 中,则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串,而第二个是type SET列,则 FIND_IN_SET() 函数被优化,使用比特计算。如果str不在strlist 或st
- jvm内存管理
easterfly
jvm
一、JVM堆内存的划分
分为年轻代和年老代。年轻代又分为三部分:一个eden,两个survivor。
工作过程是这样的:e区空间满了后,执行minor gc,存活下来的对象放入s0, 对s0仍会进行minor gc,存活下来的的对象放入s1中,对s1同样执行minor gc,依旧存活的对象就放入年老代中;
年老代满了之后会执行major gc,这个是stop the word模式,执行
- CentOS-6.3安装配置JDK-8
gengzg
centos
JAVA_HOME=/usr/java/jdk1.8.0_45
JRE_HOME=/usr/java/jdk1.8.0_45/jre
PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
export JAVA_HOME
- 【转】关于web路径的获取方法
huangyc1210
Web路径
假定你的web application 名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下结果: 1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
- php里获取第一个中文首字母并排序
远去的渡口
数据结构PHP
很久没来更新博客了,还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算,需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的:
Array
(
[0] => Array
(
[sid] => 2885842
[recetcstoredpay] =&g
- java内部类
hm4123660
java内部类匿名内部类成员内部类方法内部类
在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类。内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.class文件,但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类,外部类继承一个类,实现多继承。
&nb
- Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten
zhb8015
maven pom.xml关于hibernate的配置和异常信息如下,查了好多资料,问题还是没有解决。只知道是包冲突,就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。
maven pom:
<dependency>
<groupId>org.hibernate</groupId>
<ar
- Spark 性能相关参数配置详解-任务调度篇
Stark_Summer
sparkcachecpu任务调度yarn
随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。
由于篇幅较长,所以在这里分篇组织,如果要看最新完整的网页版内容,可以戳这里:http://spark-config.readthedocs.org/,主要是便
- css3滤镜
wangkeheng
htmlcss
经常看到一些网站的底部有一些灰色的图标,鼠标移入的时候会变亮,开始以为是js操作src或者bg呢,搜索了一下,发现了一个更好的方法:通过css3的滤镜方法。
html代码:
<a href='' class='icon'><img src='utv.jpg' /></a>
css代码:
.icon{-webkit-filter: graysc