vue.js(12)--过滤器

vue中的全局过滤器与定义私有过滤器

全局过滤器

<!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>过滤器</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <p>{{ msg | myFormat(‘哈哈哈哈哈‘) }}</p>
    </div>
    <script>
        Vue.filter(‘myFormat‘,function(msg,n) {

            return msg.replace(/一/g,n)
        })
        var vm = new Vue({
            el:‘.app‘,
            data:{
                msg:‘我是天下第一帅,我是天下第一美丽,我是天下第一可爱‘
            }
        })
    </script>
</body>
</html>

通过vue.filter(‘过滤器名称‘,function(参数){过滤方式,返回过滤后值})的方式定义一个全局过滤器。

使用过滤器的方式格式是{{ 要处理的字符 | 过滤器的名称}}

replace(‘替换字符’,‘被替换字符’)方法的使用

定义私有过滤器

<script>
var vm= new Vue({  //创建vue实例
            el:‘.app‘,
            data:{
                arr:[
                    {‘id‘:1,‘name‘:‘iPhone‘,‘time‘:new Date()},
                    {‘id‘:2,‘name‘:‘华为‘,‘time‘:new Date()},
                    {‘id‘:3,‘name‘:‘OPPO‘,‘time‘:new Date()}
                ], //创建一些初始数据与格式
                id:‘‘,
                name:‘‘,
                keywords:‘‘  //初始化参数keywords为空
            },
            directives:{
                focus:{
                    inserted:function(el) {
                        el.focus()
                    }
                }
            },//自定义指令
            filters:{
                timeFormat:function (dataStr) {
                    var myData=new Date(dataStr)
                    var y=myData.getFullYear()
                    var m=(myData.getMonth() + 1).toString().padStart(2,‘0‘)
                    var d=myData.getDate().toString().padStart(2,‘0‘)
                    var h=myData.getHours().toString().padStart(2,‘0‘)
                    var mm=myData.getMinutes().toString().padStart(2,‘0‘)
                    var s=myData.getSeconds().toString().padStart(2,‘0‘)
                    return `${y}-${m}-${d} ${h}:${mm}:${s}++++++`
                }
            }//******创建一个私有过滤器******/
        })
</script>

自定义私有过滤器形式:fliters:{过滤器名称:function (){}}

padStart方法在头部填充字符(字符串独有)实例、:时间字符串填充0

padEnd方法在尾部填充字符串

原文地址:https://www.cnblogs.com/qiqisusu/p/11359643.html

时间: 2024-11-02 20:09:44

vue.js(12)--过滤器的相关文章

Vue.js 自定义过滤器

过滤器,本质上就是一个函数.其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果. Vue.js 与 AngularJS 中的过滤器语法有些相似,使用管道符(|)进行连接,代码示例如下: {{'abc' | uppercase}}    'abc' => 'ABC' 这里使用了Vue.js 内置的过滤器 uppercase,将字符串中的字母全部转换成大写形式. Vue.js 支持在任何出现表达式的地方添加过滤器,除了上面例子中的 双大括号 表达式之外,还可以在绑定指令的表达式后调用,代码

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Vue.js -- 双向过滤器去除html标签

<div id="box"> <input type="text" v-model="msg | filterHtml"> <br> <label v-html="msg"></label> </div> js: new Vue({ el:'#box', data:{ msg:'<strong>这是段文字!</strong>'//定

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管

Vue.js 实战教程 V2.x(12)表单输入绑定

12表单输入绑定 12.1基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 多行文本 <spa

Vue.js(12)- 霸道的render函数渲染组件

index.html <div id="app"> <p>这是index.html</p> </div> index.js // 导入全的vue // import Vue from 'vue/dist/vue.js' // 导入阉割版的vue import Vue from 'vue' import App from './app.vue' const vm = new Vue({ el: '#app', template: `<

最新vue.js完整视频教程12套

0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+Node.js构建音乐播放器 0.7js高级课程vuejs 0.8vue.js实战开发系列 0.9Vue视频教程基础视频教程 10.vue.js实战wm平台 等...就不一一列举 一个一个发太麻烦需要可以扫描二维码关注微信公众号 或者搜索:cityapes或者搜索:城市一猿 点击菜单的vue.js就可

《Vue.js实战》一书 p117 练习 1&amp; 2 (2019.12.19)

(最近学了下angular的教程,又回过头来看 vue.js实战一书...) 练习1 :在输入框聚焦时,增加对键盘上下按键的支持,相当于加1 和减 1 练习2 :增加一个控制步伐的prop--step,比如设置为10 ,点击加号按钮, 一次增加10 . ps:只添加了少量代码,即完成了此2练习! -----------------------------------------------------------------------------------------------------

Vue.js小案例(2)

即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] { display: none; } *{ margin:0; padding:0; } body{ font-family:Microsoft YaHei; text-align:center; } li{ list-style:none; } .bar{ background-color:#5