vue 保留三位小数_vue：选项卡效果 和 小数点保留后两位效果

选项卡效果：

效果图

*{

padding:0;

margin:0;

box-sizing: border-box;

}

.app{

width:500px;

margin:100px auto;

}

ul{

overflow: hidden;

width:450px;

}

li{

list-style: none;

float: left;

width:150px;

border:1px solid #000;

text-align: center;

}

.app div{

width:450px;

border:1px solid #000;

text-align: center;

line-height: 100px;

height:100px;

}

• @click="tab(index)">

  {{item.tab}}

{{item.title}}

new Vue({

el:".app",

data:{

list:[

{tab:"选项一",show:true,title:"111111111111"},

{tab:"选项二",show:false,title:"222222222222"},

{tab:"选项三",show:false,title:"333333333333"}

]

},

methods:{

tab:function(index){

for(var i=0;i

this.list[i].show=false;

}

this.list[index].show=true;

}

}

})

小数点保留后两位效果：

效果图：

{{11.11111|addZero}}

//全局过滤器

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

return value.toFixed(2)

})

new Vue({

el:'#app',

//局部过滤器

filters:{

addZero:function(data){

return data.toFixed(2)

}

}

})