在layer弹窗控件使用vuejs的双向绑定

最新推荐文章于 2023-06-08 09:52:28 发布

qq_34507736

最新推荐文章于 2023-06-08 09:52:28 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_34507736/article/details/85068672

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用Vue.js和LayUI框架创建带有动态内容的弹窗，通过具体代码示例展示了如何将Vue组件嵌入到LayUI的弹窗中，并实时更新显示的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                title:'标题',
                // area: ['420px', '240px'], //宽高
                content:$("#roomSetting").html(),
                success:function (layero) {
                    var User_03 = Vue.extend({// 构造器
                        data: function(){
                            return {
                                rooms:rooms
                            }
                        },
                        template: "<div><div v-for='room in rooms'>{{room}}</div></div>"//HTML模版
                    });
                    var user_03 = new User_03();// 实例化
                    user_03.$mount(layero.find(".layui-layer-content")[0]);  // 挂载到元素上
                }

            });

亲测可用