VsCode自定义 Vue (html)模板:(自带过滤:时间格式)

VsCode自定义 Vue (html)模板:(自带过滤:时间格式)

第一步:打开VsCode,点击左下角的设置图形,选择User Snippets(用户代码自定义)

第二步:在弹出的输入框中输入 html,选在html.json

第三步:完成第二步,会出现如下界面,在指定位置中输入自定义的模块(注意自定义的模块代码需要放置到 原有的注解中)

自定义代码模块如下:

	"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:模块信息描述

注:如果自定义的时候需要注意特殊符号需要转义符号"\"

  • $:需要两个转义符号
  • ": 需要一个转义符号
posted @ 2019-11-19 19:50  落叶尘纷  阅读(478)  评论(0编辑  收藏  举报