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

`功能场景：`

当点击某个按钮后，地址栏上传值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>

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

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据.vue自定义指令directives实现这个需求目录自动点击所有的按钮. 自动点击第一个按钮, 自动点击所有的按钮. <ul class=&quo ...
VUE：页面布局的自动缩放
简介了解了一下关于页面布局的自动缩放. 具体实现情况一:页面固定宽高时通过固定页面宽高,根据浏览器宽高对比计算,进行body的transform. 优缺点:可达到目的,但是若窗口比例不符合固定值 ...
vue项目运行后如何自动在浏览器中打开
方法一:配置open 在根目录webpack.config.js或vue.config.js中的module.exports里面配置devServer / open,将open属性值设置为true即可 ...
VUE 切换页面后点击按钮没有反应
问题昨天线上环境出现了一个页面问题,据当事人称,他当时在这个页面停留了很久,因为吃饭去了,然后回来发现此页面按钮点不了了,除了按钮点不了外没有其他问题,按钮就跟不存在一样页面因不好对外展示已换成其 ...
Java web中使用JQuery加载某页面后，自动调用Servlet（GET方法，POST方法）
目录背景演示源码背景比如需要在页面加载后,干某些事情,就需要自动调用Servlet去调用Java代码,以达到某种功能. 演示 web网页搭建好后,进入这个web页面,自动调用Servlet ...
JavaScript之网页页面上实现自动点击
setInterval(function(){document.getElementById("单击按钮的Id").click();},1000);
微信页面在Android系统中点击a标签无效解决方法
今天在开发听书宝个人微端时,发现底的三个a标签在电脑上相互点击切换是OK的,布署到线上后,用微信打开点击切换就出问题了,有一个按钮点击始终无法跳转,用JS控制也不行. 经过测试对比,这种情况在IOS系 ...

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

`功能场景：`

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

最新文章

热门文章