优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2024-10-21 06:19:37 技术文章 7 ℃

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
}

Tags:

最近发表
标签列表