2018-09-17过滤器计算属性
2018-09-17 本文已影响0人
Rascar
1过滤器分为两种
一.局部过滤
二.全局过滤
例如：局部过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{2|nanea}}
</div>
<script>
Vue.filter("nanea",function(z){
if(z<10){
return "0"+z;
}else{
return z;
}
})
</script>
</body>
</html>
2.全局过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{122.21221456|aa}}
</div>
<script>
new Vue({
el:"#box",
filters:{
aa:function(ddd){
return ddd.toFixed(2)
}
}
})
</script>
</body>
</html>
3..计算属性 ：对于任何复杂逻辑，你都应当使用计算属性。
<!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>
4.总结数组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()
