Vueフォーム処理でフォームデータのフォーマットされた表示を実装する方法

Vue フォーム処理でフォーム データの書式設定された表示を実装する方法

フロントエンド開発では、フォームはよく使用されるコンポーネントの 1 つです。フォームでは、日付形式や通貨形式など、特定の形式でデータを表示する必要があることがよくあります。 Vue では、カスタム命令またはフィルターを通じてフォーム データの書式設定された表示を実装できます。

この記事では、例を使用して、Vue フォーム処理でフォーム データを書式設定して表示する方法を紹介します。

データのフォーマットされた表示を実装するためのカスタム命令

一般的な方法は、カスタム命令を使用してデータのフォーマットされた表示を実装することです。まず、Vue にカスタム ディレクティブを登録する必要があります。コードは次のとおりです。

// 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)
}

上記のコードでは、Vue.directive メソッドを通じて format という名前のカスタム ディレクティブを定義します。 bind および update フック関数では、formatValue メソッドを使用して、受信パラメーターに従ってデータをフォーマットします。このうち、value はフォーマット対象のデータを表し、arg はフォーマットの種類を表します。

次に、Vue インスタンスでこのカスタム命令を使用してデータをフォーマットします。コードは次のとおりです。

<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>

上記のコードでは、パイプライン演算子 | を使用し、カスタム命令 format から format を呼び出します。 。日付と通貨の書式設定された表示は、さまざまなパラメーターを渡すことによって実現されます。

フィルターによるデータの書式設定された表示の実装

もう 1 つの一般的な方法は、フィルターを使用してデータの書式設定された表示を実装することです。フィルターは、データを処理する関数であるという点でカスタム命令に似ています。 Vue インスタンスでフィルターを定義すると、これらのフィルターをテンプレートで使用して、表示されるデータをフォーマットできます。

まず、Vue インスタンスでフィルターを定義する必要があります。コードは次のとおりです。

// 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)
}

上記のコードでは、Vue.filter メソッドを通じて format という名前のフィルターを定義します。日付と通貨の書式設定された表示は、さまざまなパラメーターを渡すことによって実現されます。

次に、テンプレートで定義されたフィルターを使用してデータをフォーマットできます。コードは次のとおりです。

<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>

上記のコードでは、パイプ演算子 | を使用し、フィルター format から format を呼び出します。日付と通貨の書式設定された表示は、さまざまなパラメーターを渡すことによって実現されます。

上記の 2 つの方法により、Vue フォーム処理でフォーム データの書式付き表示を実装できます。カスタム ディレクティブまたはフィルターを使用すると、コードがより簡潔になり、複数のコンポーネント間で再利用可能になります。この記事が、Vue フォーム データの書式設定された表示について理解するのに役立つことを願っています。

以上がVueフォーム処理でフォームデータのフォーマットされた表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。