選項卡切換功能 v-show的使用
阿新 • • 發佈:2018-12-22
<template> <div class="loveToo"> <div class="loveTooTitle"> <p> <span @click="num=0" >猜你喜歡</span> <span @click="num=1">嚴選車</span> <span @click="num=2">超值車源</span> </p> <i class="iconfont icon-triangle-up"></i> </div> <ul v-show="num==0"><li> <img src="../../assets/images/car.jpg" alt=""> <div class="loveLiR"> <h4>AAA長安CS75 2014款 1.8T 自動精英型</h4> <p>2015年/7.8萬公里</p> <p><strong>8.20萬</strong>新車價<span>14.70萬</span></p> </div> </li> </ul> <ul v-show="num==1"><li> <img src="../../assets/images/car1.jpg" alt=""> <div class="loveLiR"> <h4>BBB長安CS75 2014款 1.8T 自動精英型</h4> <p>2015年/7.8萬公里</p> <p><strong>8.20萬</strong>新車價<span>14.70萬</span></p> </div> </li> </ul> <ul v-show="num==2"><li> <img src="../../assets/images/car2.jpg" alt=""> <div class="loveLiR"> <h4>CCC長安CS75 2014款 1.8T 自動精英型</h4> <p>2015年/7.8萬公里</p> <p><strong>8.20萬</strong>新車價<span>14.70萬</span></p> </div> </li> </ul> </div> </template> <script> export default { name: "CarsLoveToo", // components: {CarsLoveTooList}, data:function(){ return{ num:0, } }, methods:{ dosomething(){ } } } </script> <style lang="scss" scoped> .loveToo{ .loveTooTitle { position: relative; border-bottom: 4px solid #dfdfdf; p{ display: flex; justify-content: space-around; padding: .23rem 0; span{ font-size: .18rem; } } .iconfont{ font-size: .15rem; color: #dfdfdf; position: absolute; left: .58rem; bottom: -6px; } } ul{ padding: .2rem .3rem .2rem .2rem; li{ display: flex; justify-content: center; align-items: center; padding: .18rem 0; border-bottom: 1px solid #dfdfdf; img{ width: 36%; padding-right: .15rem; } .loveLiR{ font-size: .11rem; color: #969da6; h4{ font-size: .14rem; color: #000; } p{ font-size: .14rem; color: #bebebe; } p:last-of-type{ strong{ color: red; } span{ font-size: .11rem; color: #bebebe; text-decoration: line-through; } } } } } } </style>