html元素的计算属性,过滤器,计算属性

1.过滤器：让要在显示在页面上的内容进行重新筛选

包括两种类型： 全局过滤器和局部过滤器

全局过滤器：JS分为两个部分,一个是Vue.filter('过滤器的名字’,function(){}),另一个是new Vue({el:‘id名或class名’,data:{})

局部过滤器：JS只有一部分new Vue({el:‘id名或class名’,data:{},methods:{},filters:{过滤器名字：function(){}}})

格式:JS和HTML

例子;

效果1：让单位数变为两位

Document

{{2|addZero}}

//全局过滤器

Vue.filter('addZero',function(data){

if(data<10){

return '0'+data;

}else{

return data;

}

})

new Vue({

el:'#itany'

})

效果2：保留两位小数

Document

{{123.41233|number}}

//全局过滤器

// Vue.filter("number",function(data){

// return data.toFixed(2)

// })

new Vue({

el:'#itany',

//局部过滤器

filters:{

number:function(data){

return data.toFixed(2)

}

}

})

Document

{{s|sm}}

/* Vue.filter('sm',function(da){

return da.toFixed(2)

})*/

new Vue({

el:'#a',

data:{

s:123.456

},

filters:{

sm:function(da){

return da.toFixed(2)

}

}

})

保留两位小数：toFixed(n)可以进行四舍五入n表示保留几位小数

var num=123.456

console.log(num.toFixed(2));

效果3：显示当前时间

Document

{{new Date()|date}}

Vue.filter("date",function(data){

return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';

})

new Vue({

el:'#itany'

})

知识点：

var date=new Date();

console.log(date);

//年

var year=date.getFullYear();

//月

var mon=date.getMonth()+1;

//日

var tian=date.getDate();

//星期

var day=date.getDay();

//小时

var hours=date.getHours();

//分钟

var min=date.getMinutes();

//秒

var sec=date.getSeconds();

console.log(sec)

document.querySelector('h1').innerHTML='现在时间是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒';

2.计算属性：计算属性关键词computed。

含义：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

计算属性的用法：在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

例子：

效果1;

Document

{{msg.split(' ').reverse().join('===')}}

//这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。

{{count}}

new Vue({

el:'#itany',

data:{

msg:'hello vue'

},

computed:{ //计算属性

count:function(){

return this.msg.split(' ').reverse().join('===')

}

}

})

知识点：

var str='hello vue'

var strs=str.split(' ');//切割

console.log(strs);

var str1=strs.reverse();//翻转

console.log(str1);

var str2=str1.join('===');//拼接

console.log(str2);

效果2：简单计算

Document

加货

{{total}}

new Vue({

el:'#itany',

data:{

package1:{price:2,count:3},

package2:{price:4,count:6}

},

computed:{

total:function(){

return this.package1.price*this.package1.count+this.package2.price*this.package2.count

}

},

methods:{

add:function(){

this.package1.count++;

}

}

})

3.数组API:

(1)string(); 把数组转换成字符串

例：

var arr=[1,2,3,4,5];

var str=String(arr);

console.log(str);

//1,2,3,4,5

(2)join() 方法将数组(或一个类数组对象)的所有元素连接到一个字符串中，不会改变数组

例：

var arr['h','e',l'',''l,'o'];

var str=arr.join('-');//h-e-l-l-o

var str=arr.join('');//hello

var str=arr.join(' ');//h,e,l,l,o

console.log(str);

(3)concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

用法：

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

例：

①var arr=['a','b','c'];

var str=arr.concat(1,2); console.log(str);//['a','b','c',1,2]

②var arr=['a','b','c'];

var arr2=[1,2,3];

var str=arr.concat(arr2); console.log(str);//['a','b','c',1,2,3]

(4)slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

slice(starti,endi+1); 截取

特点：

①含头不含尾

②如果省略第二个参数，默认从starli开始截取到结尾

③如果一个参数都不写，相当于复制原素组

④支持负数参数

例：

var arr=['a','b','c','d','e','f','g'];

//下标 0 1 2 3 4 5 6

// -7 -6 -5 -4 -3 -2 -1

var arr.slice(3,5);[//'d',''e];

var arr.slice(3);//['d','e','f','g'];

var arr.slice();//['a','b','c','d','e','f','g'];

var arr.slice(-4,-2);//['d','e'];

console.log(str) ;

(5)splice(starti,n); (n代表个数)

例：

var arr=['a','b','c','d','e','f','g'];

①删除

var str=arr.splice(3,2);

consolie.lig(arr);//['a','b','c','f','g'];

②插入

var str=arr.splice(3,0,'1','2');

consolie.lig(arr);//['a','b','c','1','2','d','e','f','g'];

③替换

var str=arr.splice(3,2,'A','B');

consolie.lig(arr);//['a','b','c','A','B','f','g'];

(6)reverse(); 翻转

例：

var arr=[1,2,3,4,5];

var str=arr.reverse();

console.log(str);//[5,4,3,2,1]

(7)push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。给数组末

尾添加元素

例：

var arr=[1,2,3,4,5];

var str=arr.push('a');

console.log(arr);//[1,2,3,4,5,'a']

(8)pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

使用：

arr.pop()

注意：

如果你在一个空数组上调用 pop()，它返回 undefined。

例：

var arr=[1,2,3,4,5];

var str=arr.pop();

console.log(arr);//[1,2,3,4]

(9)unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

例：

var arr=[1,2,3,4];

var str=arr.unshift('fff');

console.log(arr);//['fff',1,2,3,4]

(10)shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

注意：

shift 方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0)，则返回 undefined。

例：

var arr=[1,2,3,4];

var str=arr.shift();

console.log(arr);//[2,3,4]