天涯头条

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

2023-04-03 10:53 由 学以致用的人 发表于 #前端开发
<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()
　　
})

　　




热门相关：仙城纪   明月照大江   时间都知道   仗剑高歌   网游之逆天飞扬