zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    orale 函数大全[转] 涛
    easyuicombobox的option选项为true与false时的问题 涛
    数据库镜像转移Failover Partner 涛
    创建链接服务器 涛
    Sql Server 2008 R2 清空数据库中ldf日志文件 涛
    杂 涛
    Jquery 数组操作大全【转载】 涛
    VS2012常用快捷键 涛
    android studio集成ijkplayer Vevi
    CenOs 部署记录 Vevi
  • 原文地址:https://www.cnblogs.com/anyux/p/12203016.html
Copyright © 2011-2022 走看看