vue基础之过滤器

categories:

vue基础
tags:
过滤器

过滤器
- 使用方法

过滤器

过滤器的作用，为页面中数据进行添加修改的功能

有两种局部过滤器全局过滤器

使用方法

    声明过滤器
    {{数据|过滤器的名字}}

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础之过滤器</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
    // 创建全局组件
    // Vue.component('name',{option}

    // 过滤器的作用，为页面中数据进行添加修改的功能
    // 有两种 局部过滤器 全局过滤器
    /*
        1.声明过滤器
        2.{{数据|过滤器的名字}}
     */
    // 全局过滤器声明
    Vue.filter('myReverse',function (value) {
            return value.split('').reverse().join('');
    });
    // 全局过滤器传值
    Vue.filter('myTwoArg',function (value,arg) {
        return arg +" "+value.split('').reverse().join('');
    });

    var App = {
        data(){
            return {
                price:0,
                msg:'hello world'
            };
        },
        template: `
        <div>
            <input type="text" v-model="price">
            <h3>{{price|myCurrentcy}}</h3>
            <h3>{{msg|myReverse}}</h3>
            <h3>{{msg|myTwoArg("哈哈哈")}}</h3>
        </div>
        `,
        // 局部过滤器
        filters:{
            // 声明过滤器
            myCurrentcy: function (value) {
                return "￥" + value;
            }
        }
    }
    new Vue({
        el:'#app',
        data(){
            return {};
        },
        components:{
            App
        },
        template:`
        <App/>`
    })
</script>
</body>
</html>