VsCode自定义 Vue (html)模板:(自带过滤:时间格式)
第一步:打开VsCode,点击左下角的设置图形,选择User Snippets(用户代码自定义)
![](https://img2018.cnblogs.com/blog/1669126/201911/1669126-20191119194428861-2025925674.png)
第二步:在弹出的输入框中输入 html,选在html.json
![](https://img2018.cnblogs.com/blog/1669126/201911/1669126-20191119194442335-1956511880.png)
第三步:完成第二步,会出现如下界面,在指定位置中输入自定义的模块(注意自定义的模块代码需要放置到 原有的注解中)
![](https://img2018.cnblogs.com/blog/1669126/201911/1669126-20191119194507024-887773325.png)
自定义代码模块如下:
"Vue-Date": {
"prefix": "vue",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"https://cdn.bootcss.com/vue/2.6.9/vue.min.js\"></script>",
"\t<script src=\"https://cdn.bootcss.com/axios/0.19.0/axios.min.js\"></script>",
"</head>\n",
"<body>",
"\t<div id=\"app\">$1</div>\n",
"</body>\n",
"\t<script>",
"\t\tvar vm = new Vue({",
"\t\t\tel: '#app',",
"\t\t\tdata: {},",
"\t\t\tcreated () {},",
"\t\t\tmethods: {},",
"\t\t\tfilters: {",
"\t\t\t\tdateFilter: function (data, format =\"\"){",
"\t\t\t\t\tvar dt = new Date(data);",
"\t\t\t\t\tvar y = dt.getFullYear();",
"\t\t\t\t\tvar m = (dt.getMonth()+1).toString().padStart(2,\"0\");",
"\t\t\t\t\tvar d = dt.getDate().toString().padStart(2,\"0\");",
"\t\t\t\t\tvar h = dt.getHours().toString().padStart(2,\"0\");",
"\t\t\t\t\tvar mm = dt.getMinutes().toString().padStart(2,\"0\");",
"\t\t\t\t\tvar s = dt.getSeconds().toString().padStart(2,\"0\");",
"\t\t\t\t\tif (format.toLocaleLowerCase() === \"yyyy-mm-dd\" ||",
"\t\t\t\t\t\tformat.toLocaleLowerCase() === \"\"){",
"\t\t\t\t\t\t\treturn `\\${y}-\\${m}-\\${d}`;",
"\t\t\t\t\t} else if (format.toLocaleLowerCase() === \"yyyy/mm/dd\"){",
"\t\t\t\t\t\t\treturn `\\${y}/\\${m}/\\${d}`;",
"\t\t\t\t\t} else if (format.toLocaleLowerCase() === \"yyyy-mm-dd hh:mm:ss\") {",
"\t\t\t\t\t\t\treturn `\\${y}-\\${m}-\\${d} \\${h}:\\${mm}:\\${s}`;",
"\t\t\t\t\t} else if (format.toLocaleLowerCase() === \"yyyy/mm/dd hh:mm:ss\"){",
"\t\t\t\t\t\t\treturn `\\${y}/\\${m}/\\${d} \\${h}:\\${mm}:\\${s}`;",
"\t\t\t\t\t} else {",
"\t\t\t\t\t\t\treturn `输入的时间格式有误`;",
"\t\t\t\t\t}",
"\t\t\t\t}",
"\t\t\t}",
"\t\t});",
"\t</script>",
"</html>"
],
"description": "vue时间格式过滤模块快速搭建"
}
过滤方式调用:(vue方法只有在绑定的模块中才能起作用)
- 1.参数1表示的是Date类型的数据
- 2.方法名dateFilter不能变,参数时时间格式类型,该模块自定义了五种,如果没有自己需要的可以自定义
讲解如下:
- 1.Vue-Date:表示的是自定义的模块名称(如果觉得不是特别好可以自己起一个)
- 2.prefix:快速搭建该模块的快捷键
- 3.body:模块内容设置
- 4.description:模块信息描述
注:如果自定义的时候需要注意特殊符号需要转义符号"\"