当前阅读教程:Vue.JS入门教程 > Vue.js 过滤器的使用 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: (图片img)双向数据绑定v-model指令 | 下一篇: Vue.JS 获取表单要提交的数据 |
基础用法Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下: <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div> 过滤器函数接受表达式的值作为第一个参数。 示例以下实例对输入的字符串第一个字母转为大写。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js中过滤器的使用</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> 原始字符串:{{ message }}<br> <!--使用过滤器capitalize将首字母大写--> 过滤后的字符串:{{ message | capitalize }} </div> <script> //下面是Vue.js的代码块-开始 new Vue({ el: '#app',//app为前面div区块的id的值,通过"#"号绑定 //data区域定义属性的值 data: { message: 'huangjuhua' //后面没有数据,则这里定义完毕后面不需要跟上逗号"," }, //下面是过滤器 filters: { //自定义过滤器的处理函数 capitalize: function (value) { if (!value) return '' value = value.toString() //返回处理后的字符串 return value.charAt(0).toUpperCase() + value.slice(1) } } })//Vue.js的代码块-结束 </script> </body> </html> 效果图过滤器可以串联{{ message | filterA | filterB }} 过滤器是 JavaScript 函数,因此可以接受参数: {{ message | filterA('arg1', arg2) }} 这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。 |
|
上一篇: (图片img)双向数据绑定v-model指令 | 下一篇: Vue.JS 获取表单要提交的数据 |