百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue v-html动态生成的html怎么加样式/事件

ztj100 2024-12-03 06:54 24 浏览 0 评论

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
}

相关推荐

其实TensorFlow真的很水无非就这30篇熬夜练

好的!以下是TensorFlow需要掌握的核心内容,用列表形式呈现,简洁清晰(含表情符号,<300字):1.基础概念与环境TensorFlow架构(计算图、会话->EagerE...

交叉验证和超参数调整:如何优化你的机器学习模型

准确预测Fitbit的睡眠得分在本文的前两部分中,我获取了Fitbit的睡眠数据并对其进行预处理,将这些数据分为训练集、验证集和测试集,除此之外,我还训练了三种不同的机器学习模型并比较了它们的性能。在...

机器学习交叉验证全指南:原理、类型与实战技巧

机器学习模型常常需要大量数据,但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法,用来检验模型的表现。这有助于发现过拟合...

深度学习中的类别激活热图可视化

作者:ValentinaAlto编译:ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化,帮助更有针对性...

超强,必会的机器学习评估指标

大侠幸会,在下全网同名[算法金]0基础转AI上岸,多个算法赛Top[日更万日,让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能,这是通过使用验证指标来完成的。选择正确的验证指...

机器学习入门教程-第六课:监督学习与非监督学习

1.回顾与引入上节课我们谈到了机器学习的一些实战技巧,比如如何处理数据、选择模型以及调整参数。今天,我们将更深入地探讨机器学习的两大类:监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...

Python教程(三十八):机器学习基础

...

Python 模型部署不用愁!容器化实战,5 分钟搞定环境配置

你是不是也遇到过这种糟心事:花了好几天训练出的Python模型,在自己电脑上跑得顺顺当当,一放到服务器就各种报错。要么是Python版本不对,要么是依赖库冲突,折腾半天还是用不了。别再喊“我...

超全面讲透一个算法模型,高斯核!!

...

神经网络与传统统计方法的简单对比

传统的统计方法如...

AI 基础知识从0.1到0.2——用“房价预测”入门机器学习全流程

...

自回归滞后模型进行多变量时间序列预测

下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如,sparklingwine。如何建立一个模型来进行预测呢?一种常见的方...

苹果AI策略:慢哲学——科技行业的“长期主义”试金石

苹果AI策略的深度原创分析,结合技术伦理、商业逻辑与行业博弈,揭示其“慢哲学”背后的战略智慧:一、反常之举:AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛,苹果的克制显得格格不入:功能延期:App...

时间序列预测全攻略,6大模型代码实操

如果你对数据分析感兴趣,希望学习更多的方法论,希望听听经验分享,欢迎移步宝藏公众号...

AI 基础知识从 0.4 到 0.5—— 计算机视觉之光 CNN

...

取消回复欢迎 发表评论: