Vue过滤器

first

今天在阅读Vue官网的时候发现它有一个capitalize 过滤器的小demo,将input中的值首字母大写显示在下面,然而…没有具体的实现代码…,于是乎本着学习的精神自己写了一个

实现代码

<div id="root">
    <input type="text" v-model="message">
    <p>{{message | capitalize}}</p>
</div>

<script>
    Vue.filter('capitalize', function (value) {
        if (!value) return '';
        value = value.toString();
        return value.charAt(0).toUpperCase() + value.slice(1)
    })
    var vm=new Vue({
        el:'#root',
        data:{
            message:''
        }
    })

</script>

分析

• 其实并没有太难的点,对于初学者来说可能不太清楚如何去使用,这恰恰是官方忽略的地方…
• 首先通过Vue.filter定义一个全局的过滤器,名为capitalize,里面根据接收到的value值返回了它的首字母大写值
• 那么如何将其与input关联并显示在下方呢,在官方的示例中是可以根据input中的值动态的进行更改的,因此我们可以很容易的想到这是vue中的双向数据绑定,这样就可以响应式的显示内容
• 因此我们给input绑定一个message用于记录它的内容
• 之后在下面的p标签中通过插值表达式引入这个message,并通过 | 符号将其与 capitalize关联,使其被capitalize所过滤,这样就可以在p中动态的显示input转化后的内容

Vue萌新一枚,在读文档的时候有一些卡壳,就想记录下来分享给同样的萌新,如有错误,请多多指正