分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

LayUI 完美兼容Vue.js

发布时间:2023-09-06 01:32责任编辑:傅花花关键词:js
<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完美兼容Vuejs!

LayUI 完美兼容Vue.js

原文地址:https://www.cnblogs.com/itsharehome/p/8127215.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved