位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > Vue.js 过滤器的使用
阅读(22555525)      收藏       赞(5685)      分享
上一篇: (图片img)双向数据绑定v-model指令 下一篇: Vue.JS 获取表单要提交的数据

基础用法

Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

示例

小白教程网www.2d5.net

以下实例对输入的字符串第一个字母转为大写。

代码
<!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>
效果图

小白教程网www.2d5.net

image.png

过滤器可以串联

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数:

{{ message | filterA('arg1', arg2) }}

这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。


上一篇: (图片img)双向数据绑定v-model指令 下一篇: Vue.JS 获取表单要提交的数据
毕业设计网             广告联系QQ:45157718(微信同号)