vue基础之过滤器

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

以上是 vue基础之过滤器 的全部内容， 来源链接： utcz.com/z/379250.html

回到顶部