CSS组件的样式绑定 + tab标签切换内容

朱雀 2023-05-29 02:36 246阅读 0赞

CSS组件的样式绑定 + tab标签切换内容

效果：
在这里插入图片描述

实现方式：

  1. <view  v-for="(tag1,tag1Num) in tag1List" :key="tag1Num">
  2.     <text class="tag1" :class="{tagActive : tag1Num == num }" @click="tag1(tag1Num)">{
  3.    {tag1}}</text>
  4. </view>
  6. <view class="" v-show="num == 1">
  7.     页面内容……
  8. <view>
  10. <script>
  11.     export default {
  12.         data() {
  13.             return {
  14.                 // 分类标签
  15.                 num : 0,
  16.                 tag1List : ["1","2","3","4"]
  17.             }
  18.         },
  19.         methods: {
  20.             tag1(tag1Num){
  21.                 this.num = tag1Num
  22.             },
  23.             // 标签的切换
  24.             changeTab(lab){
  25.                 this.navIdx = lab;
  26.             }
  27.     }
  28. </script>

发表评论

表情：
评论列表 （有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读