网站首页 > 技术文章 正文
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
}
- 上一篇: 什么是HTML(什么是HTML5)
- 下一篇: 使用 `` HTML 标签的 10 个重要技巧
猜你喜欢
- 2024-10-21 HTML制作网页先熟悉CSS(用html和css做网页教程)
- 2024-10-21 HTML简单介绍及常见元素(html的元素组成部分有哪些?)
- 2024-10-21 Go Web 框架 Gin 学习2 - 模板渲染的2种方式
- 2024-10-21 HTML自定义组件(html 组件)
- 2024-10-21 Html小知识总结(html基础总结)
- 2024-10-21 你的HTML页面书写规范吗?必须知道的HTML书写规范
- 2024-10-21 用C++写出HTML,使用web服务,可以免费搭建个人博客
- 2024-10-21 【JavaScript】将执行上下文、作用域、闭包串联起来
- 2024-10-21 7.HTML中的列表、引用和代码的使用
- 2024-10-21 小白必看!Django 模板语言基础来啦
- 1507℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 511℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 487℃MySQL service启动脚本浅析(r12笔记第59天)
- 467℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 465℃启用MySQL查询缓存(mysql8.0查询缓存)
- 445℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 424℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 421℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)