LayUI 完美兼容Vue.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <div id= "app" > <form class = "layui-form" action= "" > <div class = "layui-form-item" > <div class = "layui-input-block" > <select name= "city" lay-verify= "required" > <option value= "" >请选择一个商家</option> <option v- for = "(maker, index) in maker_list" :value= "maker.mid" >{{ maker.name }}</option> </select> </div> </div> <div class = "layui-form-item" > <div class = "layui-input-block" > <a class = "layui-btn" :href= "maker_qq_url" >联系客服</a> </div> </div> </form> </div> <script src= "layui/layui.js" ></script> <script src= "vue.js" ></script> <script src= "vue-resource.js" ></script> <script> var App = new Vue({ el: '#app' , data: { selected: 0, maker_list: [], maker_qq_url: '' }, mounted: function () { this .getMakerList(); }, methods: { getMakerList: function (e) { var vm = this ; vm.$http.get( 'http://hunteryun.com/api/maker/list' ).then( function (response) { vm.maker_list = response.data; vm.$nextTick( function () { layui.use([ 'layer' , 'form' ], function (){ var form = layui.form(); form.on( 'select' , function (data){ App.getMakerQQ(data.value); }); form.render(); }); }) }, function (response) { alert( '获取商家列表失败!' ); }); }, getMakerQQ: function (mid) { var vm = this ; vm.$http.get( 'http://hunteryun.com/api/maker/get/qq/' +mid).then( function (response) { vm.maker_qq_url = 'mqqwpa://im/chat?chat_type=wpa&uin=' +response.data+ '&version=1&src_type=web&web_src=oicqzone.com' ; }, function (response) { alert( '获取商家QQ失败!' ); }); } } }) </script> |
分类:
前端技术
标签:
layui
, vue|react|angular
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现