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

测试地址

在线运行Vue组件

一、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'))