vue 过滤器

98 阅读1分钟
div id="app">
    !-- | 管道符 -->
    h1>{{price|f('万')|f('英镑')|h}}</h1>
    !-- <h1>{{str|h}}</h1> -->
    !-- 定义一个英文单词 hello 把hello 变成olleh -->

    <!-- 定义一个全局的过滤器 建立两个vue实例 让这两个vue实例的字符串 首字母都可以大写 -->
</div>
<div id="bbb">
    <h1>{{sss+'万'|h}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
    /* 对数据进行过滤,经常用于格式化文本 */

    Vue.filter('h', (val) => val.split('').reverse().join('') )

    /* 实例化一个vm对象 */
    let vm = new Vue({
        el: "#app",
        data: {
            price: '100',
            str: 'hello'
        },
        filters: {
            f: function (val, d) {
                console.log(val, d);
                return val + d;
            }
        }
    });

    let vm2 = new Vue({
        el: '#bbb',
        data: {
            sss: "nihao"
        }
    })
</script>