Vue开发04：结合Vue 2 总结C# 常见方法的JavaScript实现

测试地址

一、Trim()方法

去除首末

<template>
  <div>
    <p>原始字符串: "{{ originalStr }}"</p>
    <p>处理后的字符串: "{{ trimmedStr }}"</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 定义原始字符串
      originalStr: "_StrHelloWorld_Str"
    }
  },
  computed: {
    trimmedStr() {
      // 计算并返回处理后的字符串
      return this.trimStr(this.originalStr,'_Str');
    }
  },
  methods: {
    // 处理去除前后默认字符串的方法
   trimStr(str, prefixSuffix) {
      if (str.startsWith(prefixSuffix)) {
        str = str.slice(prefixSuffix.length);  // 去掉开头的 prefixSuffix
      }
      if (str.endsWith(prefixSuffix)) {
        str = str.slice(0, -prefixSuffix.length);  // 去掉结尾的 prefixSuffix
      }
      return str;
    }
  },
  mounted () {
    // 组件挂载后，可以进行一些初始化工作
    //console.log("组件已挂载，处理后的字符串为：", this.trimmedStr);
  }
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>

 二、DateTime.ToString('')日期格式化方法

字符串格式化为字符串

demo

<template>
  <div>
    <h1>日期格式转换</h1>
    <input v-model="inputDate" placeholder="输入ISO日期字符串" />
    <button @click="formatDateOnly">转换为 YYYY-MM-DD</button>
    <button @click="formatDateWithTime">转换为 YYYY-MM-DD HH:mm</button>
    <button @click="formatDateWithHour">转换为 YYYY-MM-DD HH:00</button>
    
    <p v-if="formattedDate">转换后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputDate: "2024-09-30T06:20:20", // 初始值
      formattedDate: ''
    };
  },
  methods: {
    formatDateOnly() {
      const date = new Date(this.inputDate);
      this.formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    formatDateWithTime() {
      const date = new Date(this.inputDate);
      this.formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    formatDateWithHour() {
      const date = new Date(this.inputDate);
      this.formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:00`;
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 24px;
}
input {
  margin-right: 10px;
}
button {
  cursor: pointer;
  margin-right: 5px;
}
</style>

封装的方法

methods: {
  formatDateOnly(inputDate) {
    const date = new Date(inputDate);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  },
  
  formatDateWithTime(inputDate) {
    const date = new Date(inputDate);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
  },
  
  formatDateWithHour(inputDate) {
    const date = new Date(inputDate);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:00`;
  }
}

以上输出的是字符串，如果想输出日期格式，加一个moment(),参考写法：

moment(this.formatDateOnly('2001-01-01 10:00:00'))