<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的更多相关文章

  1. js 完美兼容浏览器的复制功能

    1,js结合swf的复制功能,完美兼容火狐,谷歌,360,ie8,使用示例:(ps:引入copy.swf比较重要,文件传送门 解压密码:http://www.bieanju.com/,为了防止360删 ...

  2. 完美兼容js的jsfuck小测试

    无意间发现了一个可以完美兼容js语言的jsfuck语言,所以留一个备份 js转换jsfuck的工具 www.jsfuck.com 效果 代码(预警!!!有点长,不过是不是很有意思) <!DOCT ...

  3. Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

    转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...

  4. html+vue.js 实现分页可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. vue.js

    一:vue的简单介绍: (1)Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件: (2)Vue.js 自身不是一个全能框架——它只聚焦于视图层.因此它非常容易学习,非 ...

  7. Vue.js 学习笔记 第1章 初识Vue.js

    本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...

  8. 我从Angular 2转向Vue.js, 也没有选择React

    译者按: 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的. 原文: Why we moved from Angu ...

  9. Vue.js前后端同构方案之准备篇——代码优化

    收录待用,修改转载已取得腾讯云授权 导语 目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术.此篇是准备篇,工欲善其事,必先利其器.我们先在代码层面进行优化,对我们完成整个 ...

随机推荐

  1. 14 vue学习 postcssrc eslintrc.js babelrc

    一  .postcssrc.js 众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量 ...

  2. Advanced R之函数

    转载请注明出处,谢谢. 再次声明下,本人水平有些,错误之处敬请指正. 函数 函数是R基本的块结构单元:为了掌握本书中的更高级技术,你需要对函数有扎实的了解.也许你已经写过一些函数,并了解函数的基本知识 ...

  3. C#窗体上绘制矩形

    先上效果图 鼠标三个事件 private void Form1_MouseDown(object sender, MouseEventArgs e) { //记录开始点 this.mousedown ...

  4. asp.net mvc 注册中的邮箱激活功能实现

    基本流程图 注册页面就不再写出,现在将发送邮件的代码粘贴出来   public ActionResult SendEmial() { ; string validataCode = System.Gu ...

  5. Python之文件输入输出,

      文件输入与输出 • 打开文件返回文件对象 – file_object=open(file_name,access_mode='r') • 关闭文件对象 – file_object.close() ...

  6. SMB SMB2 协议wiki

    from:https://wiki.wireshark.org/SMB2/BufferCode https://msdn.microsoft.com/en-us/library/ee441872.as ...

  7. ASP.NET Core MVC 视图

    ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...

  8. 解码H264文件的一些基础知识

    这段时间一直在进行编写H264文件的解析类,因此对于H264文件的格式有了初步的了解,官方文档也看了个大概.这篇文章主要是总结了一些为解码H264文件而需要的一些前期知识,话不多说,下面是干货,有些是 ...

  9. element ui 修改默认样式

    修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...

  10. 手机端处理布局rem

    方法一 if (document.documentElement.clientWidth > 600) {//页面宽度大于600px让其宽度等于600px,字体大小等于60px,居中 docum ...