Vue进入页面后实现自动点击某个标签

最新推荐文章于 2024-06-25 22:34:03 发布

光头强儿

最新推荐文章于 2024-06-25 22:34:03 发布

阅读量1.8w

点赞数 2

分类专栏：大前端

本文链接：https://blog.csdn.net/qq_42249896/article/details/86507087

版权

大前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在这里插入图片描述

`功能场景：`

当点击某个按钮后，地址栏上传值status，获取这个值，触发和值相对应的点击事件，从而进入$http查询出相对应的选项（代付款、代发货、待收货……）。

为何不直接在控制器中接这个值，从而查询出相对应的数据呢？
因为视图页面上有vue代码，如果直接进去，没有触发$http，那么这些vue代码就不显示，只有触发了$http才能够进入后台取值回到前台去显示。我在前台中触发$http的是点击事件。就要实现进入页面后获取值从而触发和值相对应的点击事件。

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>我的订单</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/skn/css/header.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/skn/css/achievement.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/skn/css/reset.css">
	<link rel="stylesheet" href="__PUBLIC__/skn/css/bui.css" />
	<!-- bui.js 依赖于Zepto或jQuer y -->
	<script src="__PUBLIC__/skn/js/zepto.js"></script>
	<script src="__PUBLIC__/skn/js/bui.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
</head>

<body>
	<header>
		<div class="head">
			<a href="javascript:window.history.back(-1)" class="lpic"><img src="__PUBLIC__/skn/img/back.png"></a>
			<p>我的订单</p>
		</div>
	</header>
	<main id="app5">
		<div class="bui-page main">

			<main>
				<div id="uiTab" class="bui-tab">
					<div class="bui-tab-head">
						<ul class="bui-nav" id="bui-btns">
							<li class="bui-btn" @click="indexs" value="10">全部</li>
							<li class="bui-btn" @click="indexs" value="0">待付款</li>
							<li class="bui-btn" @click="indexs" value="1">待发货</li>
							<li class="bui-btn" @click="indexs" value="2">待收货</li>
							<li class="bui-btn" @click="indexs" value="3">待评价</li>

						</ul>
					</div>

					<div class="bui-tab-main list_cont">

						<ul class="none-style">
							<!-- 内容必须在li里面 -->

							<li>
								<div class="product_order" v-for="item in items">
									<div class="product_order_top" v-for="or in item.goods">

										<img :src="or.img" alt="">
										<dl class="product_order_main">
											<dt>{{or.name}}</dt>
												<dd v-if ="item.status == 0">未支付</dd>
												<dd v-if ="item.status == 1">已支付</dd>
												<dd v-if ="item.status ==2">待收货</dd>
												<dd v-if="item.status == 3">已收货</dd>
												<dd v-if="item.status == 4">已完成</dd>
										</dl>
										<dl class="product_order_bot"><dt>￥{{or.memprice}}</dt>
											<dd>×{{or.num}}</dd>
										</dl>
										<p class="font">共<span>{{or.num}}</span>件商品合计:{{item.total}}</p>
									</div>


									<div class="btn">
										<button>查看物流</button>
										<button>确认收货</button>
									</div>

								</div>

							</li>

						</ul>

					</div>
				</div>
			</main>
		</div>

	</main>
	<script>
		var app5 = new Vue({
            el: '#app5',
            data: {
                status:'',
                items:''
			},
            methods: {
                indexs:function(event){
                    var e=event.currentTarget;
					var status=e.value;
                    this.$http.post('{:U("Mylist/xianshi")}',{status:status},{emulateJSON:true})
                        .then(function(res){
                            this.items=res.data;
                            console.log(this.items)
                        })
                        .catch(function(error){
                            console.log(error);
                        });
				}
            }
        });
	</script>
</body>

</html>
<script>
	window.onload=function(){
        var value=location.href.substring(location.href.indexOf("=")+1);
		arr=['10','0','1','2','4'];
		for(var i=0;i<arr.length;i++)
		{
		    if(value==arr[i])
			{
			    $("#bui-btns").children("li")[i].click();
			}
		}
	}
</script>

光头强儿

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Vue进入页面后实现自动点击某个标签

功能场景：当点击某个按钮后，地址栏上传值status，获取这个值，通过这个值进入$http从而查询出相对应的选项（代付款、代发货、待收货……）。为何不直接在控制器中接这个值，从而查询出相对应的数据呢？因为视图页面上有vue代码，如果直接进去，没有触发$http，那么这些vue代码就不显示，只有触发了$http才能够进入后台取值回到前台去显示。我在前台中触发$http的是点击事件。就要实现...
复制链接

扫一扫

专栏目录