定义全局过滤器和全局自定义指令

最新推荐文章于 2024-01-19 01:35:05 发布

SXY0426

最新推荐文章于 2024-01-19 01:35:05 发布

阅读量113

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_44383759/article/details/125052943

版权

本文展示了如何在Vue.js中创建全局过滤器`timeFormater`和`mySlice`，用于格式化时间并截取字符串。同时，还详细解释了如何定义全局自定义指令`v-big`，该指令用于将元素内容放大10倍。通过这两个实例，读者可以深入理解Vue的扩展机制及其在实际项目中的应用。

摘要由CSDN通过智能技术生成

1.全局过滤器

 <div id="root">
        <h3>现在是：{{time|timeFormater('YYYY_MM_DD')|mySlice}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.filter('myslice',function(value){
            return value.slice(0, 4)
        })
        const vm = new Vue({
            el: "#root",
            data: {
                time: 17394839483433
            },
            filters: {
                timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                    return dayjs(value).format(str)
                }
                // mySlice(value) {
                //     return value.slice(0, 4)
                // }
            }
        })
    </script>

2.全局自定义指令

div id="app">
        <h3>{{name}}</h3>
        <h2>当前n的值是:<span v-text="n"></span></h2>
        <h2>放大10倍后n的值:<span v-big="n"></span></h2>
        <button @click="n++">+</button>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.directive("big", function (element, binding) {
            // console.log(element);
            console.log(binding.value);
            console.log(binding);
            console.log('big函数被调用');
            element.innerHTML = binding.value * 10
        })
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    n: 1,
                    name: "qqqqq"
                }
            },
            // directives: {
            //     big: function (element, binding) {
            //         // console.log(element);
            //         console.log(binding.value);
            //         console.log(binding);
            //         console.log('big函数被调用');
            //         element.innerHTML = binding.value * 10
            //     }
            // }
        })
    </script>