网站首页 > 基础教程 正文
1、动态生成的html,样式不生效
//html 布局
<view v-html="html">
{{html}}
</view>
//动态生成的元素
<view class="btngo" @tap="handleLink(`${ajaxlink}`)" >
去报名
</view>
//然后scoped的.btngo不生效,因为v-html创建的DOM内容不受作用域内的样式影响,
//于是我们仍然可以通过深度作用选择器来为他们设置样式。
::v-deep {
.btngo{
display: inline-block;
width: 200px;
height: 44px;
line-height: 44px;
background-image: linear-gradient(180deg, #62AFFF 0%, #007BFF 100%);
}
}
2、动态生成的html,点击事件不生效
让我醍醐灌顶的两种解决方法,我选择了第2种。
- 1、使用事件委托
- 2、绑定到外面不动态的元素上等着事件触发
//先放布局好元素,隐藏着(这样就不是动态生成的元素了)
<view class="dialog" v-if="isMobile" v-show="mdialog">
<view class="content">
<view class="htmlcontent" v-html="mhtml" >
{{mhtml}} //这里是动态文案显示内容
</view>
<view class="footer">
<view class="footerbtn" v-if="isapply" @tap="handleLink(`${ajaxlink}`)" >
立即报名//这里有点击事件handlink,我只需要在方法变动ajaxlink数字即可
</view>
<view class="footerbtn" v-else @tap="mdialog=false">
我知道了
</view>
</view>
</view>
if(r.code ==0) {
this.mhtml=`您查询的<b class="jsbold high">${r.data.univs_name}</b>可以点击下方按钮进行报名。`;
this.ajaxlink=r.data.contest_url//链接内容变动
console.log(this.ajaxlink)
this.isapply=true//显示立即报名or我知道了
this.mdialog=true//弹窗显示
}
else if(r.code ==101){
this.mhtml=`您查询的<b class="jsbold">${r.data.univs_name}</b> 暂未开启线上报名,<br>~`;
this.mdialog=true
}
猜你喜欢
- 2024-10-29 将vue代码改写成react vue文件如何编译成html
- 2024-10-29 CKEditor 4.14:支持复制粘贴 LibreOffice 文档的富文本编辑器
- 2024-10-29 Vuejs通过浏览器导航关闭模态框,实现增强的用户体验
- 2024-10-29 jQuery UI 小部件(Widget)方法调用
- 2024-10-29 HTML5新增元素介绍及运用 html5新增的功能元素
- 2024-10-29 HTML 打印问题汇总 html怎么打印
- 2024-10-29 HTML 语法的变化,HTML5有哪些新的元素和属性
- 2024-10-29 Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框
- 2024-10-29 WebView与JavaScript的交互 webview与js交互原理
- 2024-10-29 1-html基本知识 html的基本内容
- 最近发表
- 标签列表
-
- jsp (69)
- pythonlist (60)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- pythonif (68)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- console.table (62)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)