vue过滤器

Vue过滤器

特性

• 局部过滤器 new Vue({filters:{名称(value){}}})
  全局过滤器Vue.filter("名称",function(value){})
• 返回一个新的数据
• 使用{{xxx | 过滤器名称}} 或 v-bind:属性=“xxx | 过滤器名”，多个过滤器可以串联，拿取的值时前一个

全局过滤器

全局过滤器Vue.filter("名称",function(value){})

 <div id="app">
        <!-- 局部过滤器 -->
        <h1>{{time|filName}}</h1>
        <!-- 全局过滤器 -->
        <h1>{{time|filName|filNameWin}}</h1>
    </div>

<script src="./vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script>
	Vue.config.productionTip = false;
    // 全局过滤器
    Vue.filter("filNameWin", function (value) {
        return value;
    })
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                time: Date.now()
            }
        } 
    })
</script>

局部过滤器

局部过滤器 new Vue({filters:{名称(value){}}})

 <div id="app">
        <!-- 局部过滤器 -->
        <h1>{{time|filName}}</h1>
        <!-- 全局过滤器 -->
        <h1>{{time|filName|filNameWin}}</h1>
    </div>

<script src="./vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script>
	Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                time: Date.now()
            }
        },
        // 局部过滤器
        filters: {
            filName(value, str = "YYYY年MM月DD日 HH:mm:ss") {
                return dayjs(value).format(str);
            }
        }
    })
</script>

---

• 失联

最后编辑时间 2024，03，21；16：09

Vue过滤器

特性

• 局部过滤器 new Vue({filters:{名称(value){}}})
  全局过滤器Vue.filter("名称",function(value){})
• 返回一个新的数据
• 使用{{xxx | 过滤器名称}} 或 v-bind:属性=“xxx | 过滤器名”，多个过滤器可以串联，拿取的值时前一个

全局过滤器

全局过滤器Vue.filter("名称",function(value){})

 <div id="app">
        <!-- 局部过滤器 -->
        <h1>{{time|filName}}</h1>
        <!-- 全局过滤器 -->
        <h1>{{time|filName|filNameWin}}</h1>
    </div>

<script src="./vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script>
	Vue.config.productionTip = false;
    // 全局过滤器
    Vue.filter("filNameWin", function (value) {
        return value;
    })
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                time: Date.now()
            }
        } 
    })
</script>

局部过滤器

局部过滤器 new Vue({filters:{名称(value){}}})

 <div id="app">
        <!-- 局部过滤器 -->
        <h1>{{time|filName}}</h1>
        <!-- 全局过滤器 -->
        <h1>{{time|filName|filNameWin}}</h1>
    </div>

<script src="./vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script>
	Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                time: Date.now()
            }
        },
        // 局部过滤器
        filters: {
            filName(value, str = "YYYY年MM月DD日 HH:mm:ss") {
                return dayjs(value).format(str);
            }
        }
    })
</script>