Vue2，plugin插件的使用详解

最新推荐文章于 2024-07-19 10:52:38 发布

玛卡巴卡的造

最新推荐文章于 2024-07-19 10:52:38 发布

阅读量691

点赞数 1

分类专栏： Vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45188736/article/details/122991631

版权

Vue2 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

plugin插件的使用

我们来创建一个插件，注意必须要写install对象,install里面写具体的操作。

    var wgd = {
        install: (Vue) => {
            Vue.filter("timeFormat", (val) => {
                let time = new Date(val)
                let year = time.getFullYear()
                let month = time.getMonth() + 1
                let day = time.getDate();
                return year + "年" + month + "月" + day + "号"
            })
        }
    }

使用插件,需要在创建Vue实例对象之前使用：

   Vue.use(wgd)
const app=new Vue({
    el:'#app',
    data:{
        time:"2022-02-16"
    }

完整代码如下：

<body>
    <div id="app">
        {{time | timeFormat}}
    </div>

    <script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    var wgd = {
        install: (Vue) => {
            Vue.filter("timeFormat", (val) => {
                let time = new Date(val)
                let year = time.getFullYear()
                let month = time.getMonth() + 1
                let day = time.getDate();
                return year + "年" + month + "月" + day + "号"
            })
        }
    }

    Vue.use(wgd)
const app=new Vue({
    el:'#app',
    data:{
        time:"2022-02-"
    }
})

</script>
</body>