账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 中用v-html渲染富文本,如何给渲染出来的子元素DOM绑定事件?
    47
    0

    vue 中用v-html渲染富文本,如何给渲染出来的子元素DOM绑定事件,需求是富文本中有图片,点击那张然后弹出一个轮播窗口就从那张开始显示,但是vue 挂载之后根本选不DOM添加事件 在父元素上添加只能每次从第一张开始!

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)
    <div class="content backstagePush" v-html="detail.questionContent" @click="showImgSlideTRY(detail.images)"></div>

    showImgSlide(data){ //从第一张开始,绑定事件在父元素上

        if(data==null||data==""){
          this.isShowSwiperImgShow = false;
        }else{
          this.isShowSwiperImgShow = true;
        }
        this.showImgSlideArr=this.detail.images;
      },
    
    

    showImgSlideTRY(data){ //尝试

         if(data==null||data==""){
           this.isShowSwiperImgShow = false;
         }else{
          let imgArr = data.split(",");
          let slideNub;
          
          $("img").click(function(){
            let imgAttr = $(this).attr("src");
            for(let i=0;i<imgArr.length;i++){
              if(imgAttr == imgArr[i]){
                slideNub = i+1;
                console.log(slideNub);
                return;
              }
            }
          });
          this.isShowSwiperImgShow = true; //控制隐藏轮播显示
          
         }
        this.showImgSlideArr=this.detail.images;//赋值轮播图
      },
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 独自上岸自我救赎 普通会员 1楼

      在Vue中,你可以使用v-on指令来绑定事件。例如,如果你想在子元素上绑定一个点击事件,你可以这样做:

      ```html

      点击我

      ```

      然后在你的Vue组件中,你可以这样定义一个方法来处理这个事件:

      javascript methods: { handleClick() { console.log('子元素被点击了'); } }

      这样,当你点击这个子元素时,handleClick方法会被调用,并在控制台打印出"子元素被点击了"。

      你也可以在事件处理器中使用this关键字来访问子元素:

      javascript methods: { handleClick() { console.log(this.$refs.myDiv); // 在这里,`this`指向子元素 } }

      这样,当你点击这个子元素时,handleClick方法会打印出this.$refs.myDiv,这将输出子元素的DOM引用。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部