切换页面与地址核心思想

最新推荐文章于 2024-11-01 10:18:14 发布

微尘心态

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量74

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_57700056/article/details/133704871

版权

切换页面与地址核心思想

1.获取点击的数据
2.确认active是否存在

在这里插入图片描述
上代码
地址切换

// 地址切换
<div class="text item"
		1.获取数据
        @click="switchAddress(item)" 
        2.确认类名
        :class="{active: activeAddress.id === item.id}" 
        v-for="item in checkInfo.userAddresses" 
        :key="item.id">
      <ul>
      <li><span>收<i />货<i />人：</span>{{ item.receiver }} </li>
      <li><span>联系方式：</span>{{ item.contact }}</li>
      <li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li>
      </ul>
    </div>


script代码

// 切换地址

const activeAddress = ref({}) // 新地址
const switchAddress = (item)=>{
    activeAddress.value = item
    // console.log(item);
}

上代码

tab切换

<ul class="app-header-nav">
        <li class="home" v-for="item in categoryStore.categoryList"
        :key="item.id"
        >
        <!-- :to动态传参+模板字符串 -->
        <!-- active-class  是router-link组件默认支持激活样式显示的类名-->
          <RouterLink active-class="active" :to="`/category/${item.id}`">{{item.name}}</RouterLink>
        </li>
        
 </ul>