当前位置：网站首页>Atguigu---- filter

Atguigu---- filter

2022-06-22 02:07:00 【Xiaobai learns programming together】

Insert picture description here 

<!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>
原网站

版权声明
本文为[Xiaobai learns programming together]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/173/202206220146202565.html

边栏推荐

猜你喜欢

随机推荐