初学 Vue filters

最新推荐文章于 2024-04-29 13:34:44 发布

qq_36786909

最新推荐文章于 2024-04-29 13:34:44 发布

阅读量196

点赞数

分类专栏： Vue.js 文章标签： filters vue

本文链接：https://blog.csdn.net/qq_36786909/article/details/80450096

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue 1.0 capitalize、uppercase、lowercase、json等都已被弃用。

Vue 2.0 需要自定义。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1> {{ msg | capitalize }} </h1>
        <h1> {{ msg1 | uppercase }} </h1>
        <h1> {{ msg2 | lowercase }} </h1>
        <h1><pre> {{ massage | json(8) }} </pre></h1>
        <h1><pre> {{ massage1 | json(5) }} </pre></h1>
        <h1><pre> {{ msg | wrap('start','end') }} </pre></h1>
    </div>
    <script>
        
        Vue.filter('wrap',function (value,start,end) {
            return start +' ' + value +' ' + end
        })

        var vm = new Vue({
            el:'#app',
            data:{
                msg:'i love you ?',
                msg1:'Are you sure ?',
                msg2:'sure!',
                massage:{
                    1:'hello world!',
                    2:'Yes'
                },
                massage1:{
                    3:'hey jack!',
                    4:'hey'
                }
            },
            filters:{
                capitalize: function (value) {
                    return value.charAt(0).toUpperCase()+value.slice(1);
                },
                uppercase: function (value) {
                    return value.toUpperCase();
                },
                lowercase: function (value) {
                    return value.toLowerCase();
                },
                json: function (value,param) { // param最大为10
                    return JSON.stringify(value,null,param);
                }
            }
        })
    </script>
</body>
</html>

qq_36786909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学 Vue filters

Vue 1.0 capitalize、uppercase、lowercase、json等都已被弃用。Vue 2.0 需要自定义。如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title
复制链接

扫一扫