vue过滤器微信小程序过滤器和百度智能小程序过滤器

   2023-02-09 学习力0
核心提示:      因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们。1. 微信小程序过滤器:     1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面。这里我命名为imgFilter.wxs(因为我项目里是

 

     因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们。

1. 微信小程序过滤器:

     1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面。这里我命名为imgFilter.wxs(因为我项目里是用来处理图片的,哈哈)

                              vue过滤器微信小程序过滤器和百度智能小程序过滤器

     1.2:写代码,为了方便理解,下面是一个简单的返回一个字符串拼接,当然里面的函数你想怎么处理都行,这里主要介绍思路和基本实现。

var bar = function (x) {
     return 'hello'+ x;
}

module.exports = {
       bar: bar,
//这里的第一个bar是你要输出的名字,第二个bar是上面那个函数,写一样的就不要考虑这么多
};

   1.3:定义好后就可以用了,在你需要使用的 .wxml页面引入并使用:

引入:
<wxs src="../../utils/imgFilter.wxs" module="tools" /> //要声明module等于一个你自己定义的名字,我这里写tools 使用:
<view>{{tools.bar('world')}}</view> //会显示 hello world <view>{{tools.bar(item)}}</view> //用在变量中

 

2. 百度小程序过滤器:

百度的和微信差不多,只是写法有点不一样.

// filter.js (百度的是js文件而不是wxs)
export default {
    bar: (x) => {   
        return 'hello' + x;
    }
};

<!-- swan模版 -->
<filter src="./filter.js" module="swan"></filter>

<view>{{swan.bar('world')}}</view>
页面输出: hello world
<view>{{swan.bar(item)}}</view> //使用变量

3. vue过滤器:

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。
过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:></div>


你可以在一个组件的选项中定义本地的过滤器:
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器:
Vue.filter(
'capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
在需要的组件中引入:
import "../../utils/filters";
 
new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时,会采用局部过滤器。
 //这是字符串首字母转大写的过滤器

 

 
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 小程序上传wx.uploadFile - 小程序请假-请求
    小程序上传wx.uploadFile - 小程序请假-请求
    小程序上传wx.uploadFileUploadTask wx.uploadFile(Object object)将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。num=1;当num==3时,设置按钮隐藏直接上代码:view class='
    03-08
  • 微信小程序中overflow:scroll失效的问题 微信小程序overflow设置滚动
    微信小程序中overflow:scroll失效的问题 微信小
    .common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 70%;}研究后发现,要实际的设置对应的那个维度的高度,wcss改成.common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 400px;}就恢复正常了
    03-08
  • 小程序 AI/AR 能力
    一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力,包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本,区别如下:V1平面接口,适用于用户在平面场景下,例如桌面,地面,泛平面场景,放置虚拟物体,不提供真实世界距离。用户
    03-08
  • Python小程序——快排算法 快排 python
    1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的,所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[
    02-09
  • 总结一些 egret项目接小程序时 遇到的问题及解决方法
    总结一些 egret项目接小程序时 遇到的问题及解
    1,https://blog.csdn.net/u013052238/article/details/81456908  这个地址的一些问题 是一部分,其中 第6条,当在wxgame.ts中仿照已有的 暴露库给window的方法写完之后,仍会报错,本人遇到的是 : jszip is not defined :  也尝试过其他前辈分享的解决方
    02-09
  • c++第一个小程序 第一个小程序是什么
     #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m
    02-09
  • 微信小程序 错误记录
    1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时
    02-09
  • 【小程序】添加tabBar后navigateTo失效
    某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde
    02-09
  • 微信小程序npm引入vant-weapp库的方法
    微信小程序npm引入vant-weapp库的方法
    1、终端打开小程序所在目录  2、npm init初始化,初始化完成之后,小程序项目中就会出现package.json文件,说明已经初始化成功 3、npm install --production 安装生产环境,不要npm install都给装上,以免小程序包过大  4、安装vant :npm i vant-weapp
    02-09
  • 小程序组件之间的通信 小程序子父子组件通信
    前言:其实之前就想写这个的,因为我觉得这么模块化的框架,组件之间通信是非常重要的,也是最经常用到的一块儿,只是之前在项目里一直没用到跨组件通信,现在用到了,也会用了,就一起写出来得了 :) 一、父、子组件之间的通信注:首先我们先将子组件在父组
    02-09
点击排行