<div class="layui-row layui-col-space15" id="app"></div>
定义vueApp:
let vueApp require(['vue'],function(Vue) { vueApp=new Vue({ el: "#app", data: { where:{ nickname:'', phone:'', office:0, rank:0, }, table:1, } }) })
普通点击事件直接用vue的方法:
methods: {
getSkill:function(){
console.log(this.skill,7777)
},
}
动态生成HTML,在页面写入需要添加的:
<div id="popo" style="display: none"> <div class="add-popo-card" >
<div id="getSkill"></div>
</div>
</div>
带ID的元素不会动态添加进去 只会引用class="add-popo-card"元素,同样方法也是写在vue中,这个是弹出层
setTop: function(){ var that = this; //多窗口模式,层叠置顶 layer.open({ type: 1 //此处以iframe举例 ,title: '添加技术' ,area: ['588px', '560px'] ,shade: 0 ,maxmin: false ,offset:'auto' ,content:$('#popo').html() //此处为插入代码块 ,btnAlign: 'l' ,end: function(){ //无论是关闭还是确认,都执行 that.skillName='' that.skillUrl='' that.skillDetail='' } }); }
jq方法引用vue方法的关联,可以直接修改data内数据:(动态插入的元素绑定点击事件方法,点击事件不能直接写在添加元素上的,引用此ID绑定方法)
$(document).on('click','#getSkill',function(){ vueApp.getSkill() })
翻译
搜索
复制
标签:function,vue,layui,jq,vueApp,getSkill,方法 From: https://www.cnblogs.com/dy-gf/p/17282454.html