How to implement formatted display of form data in Vue form processing

How to implement formatted display of form data in Vue form processing

In front-end development, forms are one of the components we often use. In forms, we often need to display data in a certain format, such as date format, currency format, etc. In Vue, we can implement formatted display of form data through custom instructions or filters.

This article will use examples to introduce how to format and display form data in Vue form processing.

Custom instructions to implement formatted display of data

A common way is to use custom instructions to implement formatted display of data. First, we need to register a custom directive in Vue. The code is as follows:

// main.js
import Vue from 'vue'

// 注册全局的自定义指令
Vue.directive('format', {
  bind: function (el, binding) {
    el.innerHTML = formatValue(binding.value, binding.arg)
  },
  update: function (el, binding) {
    el.innerHTML = formatValue(binding.value, binding.arg)
  }
})

// 格式化数据的方法
function formatValue(value, arg) {
  if (arg === 'date') {
    return formatDate(value)
  } else if (arg === 'currency') {
    return formatCurrency(value)
  }
}

// 格式化日期的方法
function formatDate(value) {
  let date = new Date(value)
  return date.toLocaleDateString()
}

// 格式化货币的方法
function formatCurrency(value) {
  return '$' + value.toFixed(2)
}

In the above code, we define a custom directive named format through the Vue.directive method. In the bind and update hook functions, we use the formatValue method to format the data according to the incoming parameters. Among them, value represents the data to be formatted, and arg represents the formatting type.

Next, we can use this custom instruction in the Vue instance to format the data. The code is as follows:

<template>
  <div>
    <h1>数据格式化显示示例</h1>
    <p>日期格式化：{{ date | format('date') }}</p>
    <p>货币格式化：{{ amount | format('currency') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2022-01-01',
      amount: 1000.12345
    }
  }
}
</script>

In the above code, we use the pipeline operator | and call the custom instruction format through format . Formatted display of date and currency is achieved by passing in different parameters.

Filter implements formatted display of data

Another common way is to use filters to implement formatted display of data. Filters are similar to custom instructions in that they are functions that process data. By defining filters in the Vue instance, we can use these filters in templates to format the displayed data.

First, we need to define the filter in the Vue instance. The code is as follows:

// main.js
import Vue from 'vue'

// 定义全局过滤器
Vue.filter('format', function (value, arg) {
  if (arg === 'date') {
    return formatDate(value)
  } else if (arg === 'currency') {
    return formatCurrency(value)
  }
})

// 格式化日期的方法
function formatDate(value) {
  let date = new Date(value)
  return date.toLocaleDateString()
}

// 格式化货币的方法
function formatCurrency(value) {
  return '$' + value.toFixed(2)
}

In the above code, we define a filter named format through the Vue.filter method. Formatted display of date and currency is achieved by passing in different parameters.

Next, we can use the defined filters in the template to format the data. The code is as follows:

<template>
  <div>
    <h1>数据格式化显示示例</h1>
    <p>日期格式化：{{ date | format('date') }}</p>
    <p>货币格式化：{{ amount | format('currency') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2022-01-01',
      amount: 1000.12345
    }
  }
}
</script>

In the above code, we use the pipe operator | and call the filter format through format. Formatted display of date and currency is achieved by passing in different parameters.

Through the above two methods, we can implement formatted display of form data in Vue form processing. Using custom directives or filters can make our code more concise and reusable across multiple components. I hope this article will help you understand the formatted display of Vue form data!

The above is the detailed content of How to implement formatted display of form data in Vue form processing. For more information, please follow other related articles on the PHP Chinese website!