zoukankan      html  css  js  c++  java
  • VUE基础3-过滤器与生命周期

    filter(过滤器)

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化

     

    局部过滤器

      过滤通过管道符 | 接收变量,将管道符前的参数传递给管道符后的方法,当有多个参数时,在方法名后加括号,填入参数即可

      用途:一般用来对接口返回字段进行处理,如返回status状态码,需要前端转换为 ‘成功’或者‘失败’等

     1 <div id="app">
     2     {{count |change('———百分比')}}
     3 </div>
     4 
     5 new Vue({
     6         el:'#app',
     7         data:{
     8             count:19
     9         },
    10         //局部过滤器
    11         filters:{
    12             change:function (value,f){
    13                 return value +'%' +f
    14             }
    15         }

    全局过滤器

      全局过滤器 是对于所有的vue实例都生效,需要事前引用

     1 <div id="app">
     2     <div>全局过滤器{{count | allNumber}}</div>
     3 </div>
     4 
     5 <script>
     6     //全局过滤器
     7     Vue.filter('allNumber',function (value) {
     8         return value + '%'
     9     });
    10 
    11     new Vue({
    12         el:'#app',
    13         data:{
    14             count:19,
    15         },
    16       
    17     })
    18 </script>

    过滤器支持参数传递,第一参数是管道符左侧参数,第二个参数是括号中的参数

    1 <span>{{num|percentage('&')}}</span>
    2 filters: {
    3     percentage: function (num,other) {
    4         if (num) {
    5             return num + '%' + other
    6  
    7         }
    8     }
    9 }

     Vue生命周期

      其中常用的为created和mounted,一般都是将axios接口请求放在mounted中,用于将接口返回数据初始化到data上

    new Vue({
            el: '#app',
            data: {
                msg: ''
    
            },
            //实例化后,数据还没有初始化
            beforeCreate: function () {
                console.log('beforeCreate')
            },
            // 数据初始化之后
            created: function () {
                this.msg = 'aaa';
                console.log(this.msg)
                console.log('created')
            },
            // 未和标签进行关联之前
            beforeMount: function () {
                console.log('beforeMount')
            },
            // 实例和标签进行关联后
            mounted: function () {
                // 获取后台的列表数据
                this.msg = '获取后台的列表数据';
                console.log('mounted')
            },
            // 数据更新前
            beforeUpdate: function () {
                console.log('beforeUpdate')
            },
            // 数据更新后
            updated: function () {
                console.log('updated')
            },}
  • 相关阅读:
    Permutations II
    Add Binary
    Integer to Roman
    Roman to Integer
    Word Break
    完整记录一则Oracle 11.2.0.4单实例打PSU补丁的过程
    SQL Tuning 基础概述06
    SQL Tuning 基础概述05
    SQL Tuning 基础概述04
    SQL Tuning 基础概述03
  • 原文地址:https://www.cnblogs.com/bugoobird/p/13205179.html
Copyright © 2011-2022 走看看