vue：选项卡效果 和 小数点保留后两位效果
2018-09-17 本文已影响0人
辞苏
选项卡效果：
效果图
<head>
<style>
*{
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;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in list"
@click="tab(index)">
{{item.tab}}
</li>
</ul>
<div v-show="item.show" v-for="(item,index)
in list">
{{item.title}}
</div>
</div>
<script>
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.length;i++){
this.list[i].show=false;
}
this.list[index].show=true;
}
}
})
</script>
</body>
小数点保留后两位效果：
效果图：
<body>
<div id="app">
<p>{{11.11111|addZero}}</p>
</div>
<script>
//全局过滤器
Vue.filter('addZero',function(value){
return value.toFixed(2)
})
new Vue({
el:'#app',
//局部过滤器
filters:{
addZero:function(data){
return data.toFixed(2)
}
}
})
</script>
</body>
