Vue 中使用三目运算符判断标签的选中状态改变class样式

首先在data里定义一个变量

然后在需要改变的标签里写入三目运算，意思是当 active这个变量等于当前项的url地址的时候会给一个active的class 类名

   <div class="btn">
      <div class="btn_cont" >
        <div
          :class="active === item.url ? 'active' : ''"
          v-for="(item, index) in newsList"
          :key="index"
          @click="NewsDetails(item.url)"
        >
          {
    
    { item.title }}
        </div>
      </div>
    </div>

需要写一个方法,我这里写的是跳转页面后改变active的值为点击的url ，然后三目运算符进行运算添加class类但是这样当点击浏览器的刷新，后退，前进按钮的时候，这个值都会回到默认值的状态

举例：默认值为：a 页面激活, 三个页面a.,b,c

当我现在的页面是a,我点击按钮跳转到b，再点击按钮跳转到c 页面,执行后退到b页面，

这个时候这个选中状态理应是b被选中，但是实际情况是回到了默认值a 页面被选中的状态

导致看到的和实际的不一致，怎么解决呢？看我下面的watch 方法

  methods: {
    NewsDetails(url) {
      this.$router.push({
        name: url,
      });
      this.active = url;
      
    },
  },
};

下边是我的数组：

newsList: [
        {
          title: "集团新闻",
          url: "GroupNews",
        },
        {
          title: "媒体报道",
          url: "MediaCoverage",
        },
        {
          title: "行业资讯",
          url: "TradeNews",
        },
      ],

watch 方法

扫描二维码关注公众号，回复： 16847030 查看本文章

首先我获取当前地址路由的name 名字通过判断路由的name 名字是否等于需要激活的地址名字,来给active这个变量进行赋值，再进行三目运算符的运算,就行了

immediate: true 这个会在你页面刷新的时候执行一次watch

  watch: {
    $route: {
      // 值发生变化时的回调函数
      handler(now) {
        //..... // now: 变化之后的数据
        // 获取当前地址路由的name 名字
        let url = now.name;
       
        if (url.includes("TradeNews")) {
          this.active = "TradeNews";
        } else if (url.includes("GroupNews")) {
          this.active = "GroupNews";
        } else {
          this.active = "MediaCoverage";
        }
      },
      immediate: true, //立即执行
    },
  },

Vue 中使用三目运算符 判断标签的选中状态 改变class样式

猜你喜欢

Vue 中使用三目运算符判断标签的选中状态改变class样式