首页 > 其他分享 >layui和vue.js和jq一起使用调用vue方法及变量

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

时间:2023-04-03 11:02:15浏览次数:40  
标签:function vue layui jq vueApp getSkill 方法

<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

相关文章