【11】Vue基础：混入和过滤器

前端

发布日期: 2020-10-23

更新日期: 2020-10-23

文章字数: 414

阅读次数:

mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mixin 混入</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div>姓名：{{ name }}，性别：{{ sex }}</div>
        </div>
        <script type="text/javascript">
            var mixin = {
                data() {
                    return {
                        name: '张三',
                        sex: '男'
                    }
                }
            }
            new Vue({
                el: '#app',
                mixins: [mixin]
            });
        </script>
    </body>
</html>

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

filters过滤器

Vue 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。
模版代码：

<!-- 在双花括号中 -->
<div>{{ msg | toUpperCase }}</div>

<!-- 在 `v-bind` 中 -->
<div v-bind:msg="msg | toUpperCase"></div>

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>filters 过滤器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div>{{ msg | toUpperCase }}</div>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                filters: {
                    toUpperCase(val) {
                        return val.toUpperCase();
                    }
                },
                data() {
                    return {
                        msg: 'abcdefg'
                    }
                }
            });
        </script>
    </body>
</html>