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

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

ruisui885个月前 (01-11)技术分析60

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怎么加样式/事件” 的相关文章

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

虚幻引擎5.5发布

IT之家 11 月 13 日消息,虚幻引擎 5.5 现已发布。据介绍,新版本虚幻引擎在动画创作、虚拟制作和移动游戏开发方面取得进步;渲染、摄像机内视觉特效和开发人员迭代等领域的部分功能已可用于生产。IT之家整理部分功能亮点如下:动画Sequencer增强虚幻引擎的非线性动画编辑器 Sequencer...

Excel中的FILTER函数详细介绍及使用示例

在Excel中处理大量数据时,经常需要根据特定条件筛选出符合条件的数据行或列。这正是Excel的FILTER函数发挥作用的地方。FILTER函数是Excel中一个非常强大的工具,它可以基于一个或多个条件动态地过滤数据,使数据分析和报告制作变得更加高效和准确。本文将详细介绍FILTER函数的用法,并提...

史上最全 vue-router 讲解 !!!

前端路由 前端路由是后来发展到SPA(单页应用)时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转。 前端路由在SPA项目中是必不可少的,页面的跳转、刷新都与路由有关,通过不同的url显示相应的页面。 优点:前...

三勾商城(java+vue3)微信小程序商城+SAAS+前后端源码

项目介绍本系统功能包括: 前台展示+后台管理+SAAS管理端,包括最基本的用户登录注册,下单, 购物车,购买,结算,订单查询,收货地址,后台商品管 理,订单管理,用户管理等等功能,小伙伴一起来看看吧。三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城...

同步和异步的区别是什么,同步和异步的代码

同步和异步的区别在于程序执行操作时是否需要等待操作完成。同步操作意味着程序在执行一个操作时会一直等待操作完成才继续执行下一个操作,而异步操作则是指程序执行一个操作时,不会等待操作完成,而是立即返回,继续执行后面的操作。以下是同步和异步的代码示例:同步代码示例:console.log("sta...