Vue2，plugin插件的使用详解-CFANZ编程社区

Vue2，plugin插件的使用详解

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>

这时候使用过滤器就会有效，因为插件已经安装。

0 条评论