vue.js 全局过滤器 局部过滤器 计算属性
1.过滤器 ： 让要显示在页面上的内容进行重新筛选
全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{new Date()|date}}</p>
</div>
<script src='js/vue.js'></script>
<script>
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'
})
</script>
</body>
</html>
局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box"> {{1.1234567890|add}} </div>
<!--
<script>
Vue.filter('add',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'.box'
})
</script>
-->
<!--
<script>
new Vue({
el: '.box',
filters:{
add:function(data){
if(data>10){
return'0'+data;
}else{
return data+'0'
}
}
}
})
</script>
-->
<script>
new Vue({
el: '.box',
filters: {
add: function (data) {
return data.toFixed(5);
}
}
})
</script>
</body>
</html>
2.计算属性 ：对于任何复杂逻辑，你都应当使用计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src='../diyitain/js/vue.js'></script>
</head>
<body>
<div class="box">
<button v-on:click='btn'>点击</button>
<h1>{{app}}</h1>
</div>
<script>
new Vue({
el:'.box',
data:{
mag1:{price:2,count:3},
mag2:{price:3,count:4}
},
computed:{
app:function(){
return this.mag1.price*this.mag1.count+this.mag2.price*this.mag2.countoo
}
},
methods:{
btn:function(){
this.mag2.price++
}
}
})
</script>
</body>
</html>
3. 数组API:
String(); 数组转字符串 将数组中的元素用逗号连接成字符串 String(arr)或arr.toString()
join(); 连接 用连接符把数组里面的元素连接成字符串 arr.join
concat(); 拼接 不会修改原数组 arr.concat("a","b",arr1)
slice(); 截取 不会修改原数组 arr.slice(start[,end])
splice(); 删除、插入、替换 直接修改原数组 arr.splice(start,n[,value1,value2...])
reverse(); 翻转数组 直接修改原数组 arr.reverse()
push(); 结尾入栈 在数组末尾追加元素 arr.push(value1[,value2,arr1])
pop(); 结尾出栈 弹出数组最末尾的元素 arr.pop()
unshift(); 开头入栈 在数组的最开头插入元素 arr.unshift(value)
shift(); 开头出栈 弹出数组最开头的元素。 arr.shift()
