layui和vue.js和jq一起使用调用vue方法及变量

<div class="layui-row layui-col-space15"  id="app"></div>

定义vueApp:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

let vueApp require(['vue'],function(Vue) {         vueApp=new Vue({             el: "#app",             data: {                 where:{                     nickname:'',                     phone:'',                     office:0,                     rank:0,                 },                 table:1, 　　　　　　　　} 　　　　}） }）

　　普通点击事件直接用vue的方法：

?

1	methods: {　　　　getSkill:function(){<br><br>    　　console.log(this.skill,7777)<br>　　},}

　　动态生成HTML，在页面写入需要添加的:

?

1 2	<div id="popo" style="display: none">     <div class="add-popo-card" >　　　　<div id="getSkill"></div> 　　</div> </div>

　　

?

1	带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绑定方法）

?

1 2 3 4

$(document).on('click','#getSkill',function(){     vueApp.getSkill() 　　 })

　　

翻译

搜索

复制