VUE学习----filters（过滤器）方法

filters

作用：对值进行筛选加工

使用情况

• 无参数情况

<div>{{message | reverse}}</div>

• 有参数情况

<div>{{message | addStartEnd('before ',' after')}}</div> //正确写法
<div>{{message | addStartEnd 'before ' ' after'}}</div> //官网写法，存疑

• 多个filters过滤器使用

<div>{{message | addstring | addStartEnd('before ',' after')}}</div>
<div>{{message | addstring | reverse }}</div>
按照顺序执行过滤器

• 双向过滤器

官网写法，存疑。v-model只能绑定一个变量或对象

<div id="example">
    <input type="text" v-model="msg|currencyDisplay"><br>
    <span>{{msg}}</span>
</div>

filters:{
  currentDisplay: {
      read: function(val) {
        return '$'+val.toFixed(2)
      },
      write: function(val) {
        let number = +val.replace(/[^\d.]/g, '')
        return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
      }
    }
}

正确写法，仍在调试

很遗憾，笔者没有调试成功双向过滤器。官网链接

使用事件实现类似功能，如下：

<template>
  <div id="app">
  <div>
      输入框：<input type="text" @blur="handleFocus" @input="handleInput" v-model="moneyFilters">
      <br>
      <span>Model Value: {{moneyFilter}}</span>
  </div>
</div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      moneyFilters: '0',
      moneyFilter: ''
    }  
  },
  methods:{
    handleInput(e) {
      console.log(e.target.value)
      this.moneyFilter = e.target.value
    },
    handleFocus() {
      this.moneyFilters = `$${Number(this.moneyFilter).toFixed(2)}`
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• 动态参数

官网写法，存疑

<div>{{message | concat userInfo }}</div>

正确写法

<div>{{message | concat(userInfo)}}</div>

示例说明

<template>
  <div id="app">
    <div>{{message | reverse}}</div>
    <div>{{message | addStartEnd('before ',' after')}}</div>
    <div>{{message | addStartEnd 'before ' ' after'}}</div>
    <div>{{message | addstring | addStartEnd('before ',' after')}}</div>
    <div>{{message | addstring | reverse }}</div>
    <div>{{message | concat(userInfo)}}</div>
    <!-- <div>
      <input type="text" title = "输入金额：" v-model="moneyFilteredHTML"><br>
      <span>{{money}}</span>
    </div> -->
  </div>
</template>

<script>
// import func from '../vue-temp/vue-editor-bridge'
// import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return {
      message: 'hello world ',
      userInfo: 'lucky dog',
      money: '',
    }  
  },
  filters:{
    addstring: function(value){
      return value + '!!!'
    },
    reverse: function(value){
      return value.split(' ').reverse().join('-')
    },
    addStartEnd: function(value, begin, end) {
      return begin + value + end
    },
    concat: function(value, str) {
      return value + str
    },
    currentDisplay: {
      read: function(val) {
        return '$'+val.toFixed(2)
      },
      write: function(val) {
        let number = +val.replace(/[^\d.]/g, '')
        return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
      }
    }
  },
  computed: {
    moneyFilteredHTML: {
      get() {
        return this.currentDisplay(this.money)
      },
      set(val) {
        this.money = val
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

示例运行结果

-world-hello
before hello world after
hello world
before hello world !!! after
!!!-world-hello
hello world lucky dog