Vue25 过滤器

实例

dayjs.min.js需要去bootcdn下载

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器title>
		<script type="text/javascript" src="../js/vue.js">script>
		<script type="text/javascript" src="../js/dayjs.min.js">script>
	head>
	<body>
		
		
		<div id="root">
			<h2>显示格式化后的时间h2>
			
			<h3>现在是:{{fmtTime}}h3>
			
			<h3>现在是:{{getFmtTime()}}h3>
			
			<h3>现在是:{{time | timeFormater}}h3>
			
			<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}h3>
			<h3 :x="msg | mySlice">尚硅谷h3>
		div>

		<div id="root2">
			<h2>{{msg | mySlice}}h2>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好,尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	script>
html>

Vue25 过滤器_第1张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)