局部过滤器
首先 {{price | Format(“参数1”,“参数2”)}}
参数1 与 参数2 是实参
可以也写 ,也可以不写
第二步:data里面定义
filter:{
Format:function(vaule,arg1,arg2){
// 其中第一个参数代表了 自身 ,第二个第三个代表了 参数1 和 参数2
arg1= arg1 != null ? args1: "$"; // 判断是否传入了 arg1 ,如果传入了,使用传入的值 否则就用 $
arg2 = arg2 !=null ? arg2 : 2; //同理
return args + (arg1).toFixed( arg2) // 返回回去
//
}
}
具体代码如下
可以直接复制 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in checklistfilter" :key="index"
v-if="item.isCheck"
>
<span>{{item.checkName}}</span>
<input type="checkbox" v-model='item.isCheck'>
<span>{{item.shopNum * item.shopPrice}}</span>
<span>{{item.shopNum}}</span>
<button @click="item.shopNum++"> 增加</button>
</li>
</ul>
选择全部 <input type="checkbox" v-model="checkAll">
{{who}} <span>总价 {{totalPrice | PriceFormat("¥",3)}}</span>
<button @click="extend">展开</button>
</div>
</body>
</html>
<script>
var a=[1,2,3,4];
console.log(a.splice(0,2))
console.log(a)
var vm=new Vue({
el:"#app",
filters:{
PriceFormat:function(value,args,dec){
args= args != null ? args : "$";
dec =dec !=2 ? dec : 2;
return args + (value).toFixed(dec)
}
},
data(){
return {
checklist:[
{checkName:"yifu1",isCheck:true,shopNum:1,shopPrice:120},
{checkName:"yifu2",isCheck:true,shopNum:2,shopPrice:200},
{checkName:"yifu3",isCheck:true,shopNum:3,shopPrice:100},
{checkName:"yifu4",isCheck:true,shopNum:1,shopPrice:300},
{checkName:"yifu5",isCheck:true,shopNum:2,shopPrice:400},
],
// checkAll:false
limit:3
}
},
methods:{
extend(){
if(this.limit==3){
this.limit= this.checklist.length
}else{
this.limit=3
}
}
},
computed:{
checklistfilter(){
return this.checklist.slice(0,this.limit)
},
checkAll(){
return this.who==this.checklist.length
},
who(){
var count=0
this.checklist.forEach((item)=>{
if(item.isCheck==true){
count++
}
})
return count
},
totalPrice (){
var price=0;
this.checklist.forEach((item)=>{
if(item.isCheck==true){
price += item.shopNum * item.shopPrice
}
})
return price
}
}
})
</script>