当前位置:首页 > 技术分析 > 正文内容

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

ruisui883个月前 (01-11)技术分析38

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
}

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/172.html

标签: 深度选择器
分享给朋友:

“vue v-html动态生成的html怎么加样式/事件” 的相关文章

快速上手React

web前端三大主流框架1、Angular大家眼里比较牛的框架,甚至有人说三大框架中只有它能称得上一个完整的框架,因为它包含的东西比较完善,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能。对于刚开始学习使用框架的小伙伴们,可以推荐这个框架,学会之后简直能颠覆之前你对前端开发的认...

Windows 下 Git 拉 Gitlab 代码

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://git-scm.com/download/winStandalone Installer(安装版)注意...

抖音 Android 性能优化系列:启动优化实践

启动性能是 APP 使用体验的门面,启动过程耗时较长很可能使用户削减使用 APP 的兴趣,抖音通过对启动性能做劣化实验也验证了其对于业务指标有显著影响。抖音有数亿的日活,启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减,因此,启动性能的优化成为了抖音 Android 基础技术团队在体验优化方向...

身体越柔软越好?刻苦拉伸可能反而不健康 | 果断练

坐下伸直膝盖,双手用力向前伸,再用力……比昨天前进了一厘米,又进步了! 这么努力地拉伸,每个人都有自己的目标,也许是身体健康、线条柔美、放松肌肉、体测满分,也可能为了随时劈个叉,享受一片惊呼。 不过,身体柔软,可以享受到灵活的福利,也可能付出不稳定的代价,并不是越刻苦拉伸越好。太硬或者太软,都不安全...

Acustica Audio 发布模拟Roland Jupiter 双声道合成器插件 TH2

福利: Acustica Audio 发布模拟Roland Jupiter 风格的双声道合成器插件 TH2 免费下载 意大利 Acustica Audio 公司发布布模拟Roland Jupiter 风格的双声道合成器插件 TH2 ,灵感来源于Acustica Audio的THING-8系列,它是...

Vue2的16种传参通信方式

前言先直入主题列出有哪些传参方式,下面再通过事例一一讲解。props(父传子)$emit与v-on (子传父)EventBus (兄弟传参).sync与update: (父子双向)v-model (父子双向)ref$children与$parent$attrs与$listeners (爷孙双向)pr...