1.Vue中的过滤器
定义：让要显示在页面上的内容进行重新筛选
全局过滤器：
HTML格式：
<p>{{msg|过滤器的名字}}</p>
JS格式：
Vue.filter("过滤器的名字",function(data){
})
new Vue({
el:"#itany",
})
局部过滤器：
HTML格式：
<p>{{msg|过滤器的名字}}
JS格式：
new Vue({
el:"#itany",
filters:{
过滤器的名字:function (data) {
}
})
toFixed(n)保留几位小数，四舍五入
JS输出当前时间
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+'秒';
全局过滤器：
<div id="itany">
<p>{{8|addZero}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.filter("addZero",function(data){
if(data<10){
return "0"+data
}else {
return data
}
})
new Vue({
el:"#itany"
})
</script>
输出为：
08
局部过滤器：
<div id="itany">
<p>{{123.456|number}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
//全局
/* Vue.filter("number",function(data){
return data.toFixed(2)
})*/
new Vue({
el: "#itany",
//局部
filters:{
number:function (data) {
return data.toFixed(2)
}
}
})
</script>
输出为：
123.46
利用过滤器输出当前时间
<div id="itany">
<p>{{new Date()|number}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
/* Vue.filter("number",function(date){
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+
"日，星期"+date.getDay()+","+date.getHours()+"时"+date.getMinutes()
+"分"+date.getSeconds()+"秒"
})*/
new Vue({
el:"#itany",
filters:{
number:function (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()
//return '现在时间是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒'
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+
"日，星期"+date.getDay()+","+date.getHours()+"时"+date.getMinutes()
+"分"+date.getSeconds()+"秒"
}
}
})
</script>
输出结果如下：
2018年9月17日，星期1,15时5分29秒
2.计算属性
定义：处理复杂的逻辑操作，具有可维护性（后期好维护）
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1> //后期不好维护
<a href="[#](#)">{{count}}</a>
</div>
<script src='[js/vue.js](js/vue.js)'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{//计算属性
count:function(){
return this.msg.split(' ').reverse().join('===') //后期好维护
}
}
})
</script>
输出结果为：
vue===hello
点击加货
<div id="itany">
<button @click="add">加货</button>
<p>总计：￥{{sum}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
package1:{price:2,count:3},
package2:{price:4,count:6},
},
computed:{
sum:function(){
return this.package1.price*this.package1.count+ this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++
}
}
})
</script>
输出结果为：
Image 2.png
3.数组API
- String() // toString()把数组转换为字符串，并返回结果。
注意： 数组中的元素之间用逗号分隔。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
输出为：
Banana,Orange,Apple,Mango
2.join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
energy输出结果：
Banana,Orange,Apple,Mango
3.concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
children 输出结果：
Cecilie,Lone,Emil,Tobias,Linus,Robin
4.slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:
Orange,Lemon
5.splice() 方法用于插入、删除或替换数组的元素。
注意：这种方法会改变原始数组！。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango
6.reverse() 方法用于颠倒数组中元素的顺序。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
fruits 结果输出：
Mango,Apple,Orange,Banana
7.push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
fruits 结果输出：
Banana,Orange,Apple,Mango,Kiwi
8.pop() 方法用于删除数组的最后一个元素并返回删除的元素。
注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用 shift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits 结果输出：
Banana,Orange,Apple
9.unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
注意： 该方法将改变数组的数目。
提示: 将新项添加到数组末尾，请使用 push() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
fruits 将输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango
10.shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
注意： 此方法改变数组的长度！
提示: 移除数组末尾的元素可以使用 pop() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
fruits结果输出:
Orange,Apple,Mango
