MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. trim修飾子

trim修飾子

Vue.js
2024.05.31

trim修飾子は、入力フィールドの前後の空白を削除しデータの正確性を保つために使用されます。

trim修飾子
記法

v-model.trim=”データプロパティ名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js trim修飾子について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="submitForm" class="form-container">
        <label for="username" class="form-label">ユーザー名:</label>
        <input
          type="text"
          id="username"
          v-model.trim="username"
          class="form-input"
          placeholder="例:  ユーザー名  "
        />
        <button type="submit" class="form-button">送信</button>
      </form>
      <p>
        入力されたユーザー名:
        <span class="output">{{ formattedUsername }}</span>
      </p>
      <p>（前後の空白が削除されます）</p>
    </div>
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// main.js
Vue.createApp({
  data() {
    return {
      username: "",
    };
  },
  computed: {
    formattedUsername() {
      // 引用符を使用して前後の空白が削除されたことを強調
      return `"${this.username}"`;
    },
  },
  methods: {
    submitForm() {
      // 引用符を使用して前後の空白が削除されたことを強調
      alert(`ユーザー名: "${this.username}"`);
    },
  },
}).mount("#app");
/* main.css */
#app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 8px;
  font-weight: bold;
}

.form-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-button {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-button:hover {
  background-color: #218838;
}

.output {
  font-weight: bold;
  color: #333;
}
出力結果

入力されたユーザー名: {{ formattedUsername }}

（前後の空白が削除されます）

Vue.js