北联网教程:-是一个免费提供流行视频软件教程、在线学习分享的学习平台!

filter怎样全局运用

时间:2018-12-24作者:未知来源:北联网教程人气:

软件安装:装机软件必备包             

微信(WeChat)是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序,由张小龙所带领的腾讯广州研发中心产品团队打造 [2] 。微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费(需消耗少量网络流量)语音短信、视频、图片和文字,同时,也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。
这次给大家带来filter怎样全局使用,filter全局使用的注意事项有哪些,下面就是实战案例,一起来看一下。

官方给出

Vue.filters(id , [definition])
//id {string}
//definition {function}

详情查看

在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器

filter怎样全局使用

文件目录

下面贴上代码:

//index.js
// 引入所有的过滤函数
import readMore from './readMore';
// 导出在一个对象上
export default {
  readMore
};
//readMore.js
//查看更多文字显示'...'
let readMore = (text,length,suffix) => {
 if(text) {
  if(text.length <= length) return text;
  return text.substring(0,length) + suffix;
 }
 return text;
 };
export default readMore;

然后在main.js里面做如下处理:

filter怎样全局使用

main.js做全局注册

//全局注册自定义的过滤器
import filters from './filters';
for(let key in filters){
 Vue.filter(key, (val,value1,value2) => {
 return filters[key](val,value1,value2);
 });
}

就可以在全局使用了

//在test.vue里面使用
  <p html="readMore('文字文字' ,60,`...<font style='color:rgba(25,123,207,1);'>全文</font>`)"></p>
<span>#<span class="add">{{'文字文字' 
软件推荐:      

(北联网教程,专业提供教程)

QQ浏览器下载 百度浏览器下载 猎豹浏览器下载 谷歌chrome浏览器下载 IE浏览器下载 360安全浏览器下载 UC浏览器下载

关键词:filter怎样全局运用


软件合集下载 更多
2345一键安装合集标准版下载(软件大全) 2345一键安装合集标准版下载(软件大全)
360一键装机集合包免费下载 360一键装机集合包免费下载(纯净绿色)
腾讯精品装机软件合 腾讯精品装机软件合集包(官方安装包)
谷歌浏览器电脑最新版本下载设计简洁 谷歌浏览器电脑最新版本下载(设计简洁)
UC浏览器电脑最新官方版下载 UC浏览器电脑最新官方版下载
悟空苹果助手(免费安装苹果应用) 悟空苹果助手(免费安装苹果应用)


Copyright © 2012-2018 北联网教程(http://www.wz300.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版