当前位置：网站首页>14. Use of filter

14. Use of filter

2022-07-20 08:40:00 【Where the wind falls】

Definition ： Format the data to be displayed before displaying it （ It is suitable for some simple logical processing ）

grammar :

        1. Registration filter ：Vue.filter(name,callback) or new Vue{filters:{}}

        2. Use filters ：{ { xxx | Filter name }} or v-bind: attribute ="xxx | Filter name "

            remarks ： The filter can also receive additional parameters 、 Multiple filters can also be connected in series 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> filter </title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
			 filter ：
				 Definition ： Format the data to be displayed before displaying it （ It is suitable for some simple logical processing ）.
				 grammar ：
						1. Registration filter ：Vue.filter(name,callback)  or  new Vue{filters:{}}
						2. Use filters ：{
   { xxx |  Filter name }}   or   v-bind: attribute  = "xxx |  Filter name "
				 remarks ：
						1. The filter can also receive additional parameters 、 Multiple filters can also be connected in series 
						2. Did not change the original data ,  Is to generate new corresponding data 
		-->
		<!--  Prepare a container -->
		<div id="root">
			<h2> Displays the formatted time </h2>
			<!--  Calculate the property implementation  -->
			<h3> Now it is ：{
   {fmtTime}}</h3>
			<!-- methods Realization  -->
			<h3> Now it is ：{
   {getFmtTime()}}</h3>
			<!--  Filter implementation  -->
			<h3> Now it is ：{
   {time | timeFormater}}</h3>
			<!--  Filter implementation （ The ginseng ） -->
			<h3> Now it is ：{
   {time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice"> Silicon Valley </h3>
		</div>

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

	<script type="text/javascript">
		Vue.config.productionTip = false
		// Global filter 
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, // Time stamp 
				msg:' Hello , Silicon Valley '
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY year MM month DD Japan  HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY year MM month DD Japan  HH:mm:ss')
				}
			},
			// Local filter 
			filters:{
				timeFormater(value,str='YYYY year MM month DD Japan  HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

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

原网站

版权声明
本文为[Where the wind falls]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190503369962.html

边栏推荐

猜你喜欢

随机推荐