vue 中拼接html时添加点击事件

在vue 的html拼接在添加点击事件用原生的onclick来触发事件,将事件挂在window上

<template>
<div>
   
    <el-button @click="hahha">
        添加
    </el-button>
    <div style="height:500px;width:1000px;background:#666;" class="circle">
            1111
    </div>

</div>
</template>
<script>
export default {
  data() {
    return {
        tooltip:"test",
      
     
    };
  },
  methods: {
      hahha(){
          var item=this
          debugger
          item.tooltip
          var circle = $(".circle");
                                                                                                                                                                                                                                                                                                                                        // onclick=atlas_edit('+v.pk_atlas_main+',"'+v.name+'")   '+onclick=bimshowinfo() +'                                                                                     
          circle[0].innerHTML=`<div class="leadTips"><img src="http://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/><div class="leadText"><span class="canvspna"><span style="display: block;float:left">${item.tooltip}</span> <span style="display: block;float:right;color:#3aa1fe;cursor: pointer;;"></i><i class="iconfont icon-hao1" style="margin-left:10px;margin-right:20px;font-size:25px;"  onclick="closebimface()"  ></i> </span></span><div id="canvasDiv" class="ecanvasDiv"></div></div></div>`
           window.closebimface =function(){ 
            console.log("ssss")
          }
      },
    
  },
 
};
</script>
<style >

.leadTips {display: flex; justify-content: start; width: auto; transform: translateY(-40px);width:1000px;height:300px;}
    .leadTips img {display: inline-block; width: 49px; height: 40px}
    .leadText {display: block; background: #fff; color: #fff; padding: 10px;width:800px;height: 300px;}
    .ecanvasDiv{width:800px;height: 280px;}
    .canvspna{
      width: 785px;
    height: 28px;
    line-height: 28px;
      color:#409eff;
    }
</style>

 

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
### 回答1: 在Vue,如果要使用正则表达式匹配数字并在数字前添加换行符,可以使用Vue的模板语法和计算属性来实现。下面是一个示例: ``` <template> <div> <p v-for="number in numbersWithNewLine">{{ number }}</p> </div> </template> <script> export default { data() { return { numbers: [1, 2, 3, 4, 5], }; }, computed: { numbersWithNewLine() { return this.numbers.join('\n'); }, }, }; </script> ``` 在上面的代码,我们使用了一个计算属性`numbersWithNewLine`,它使用`join()`方法将数字数组转换为一个带有换行符的字符串。然后,我们在模板使用`v-for`指令循环遍历这个新的字符串数组,并将每个数字包装在一个`<p>`标签显示出来。 如果你想要将换行符添加到每个数字前面,可以修改计算属性的字符串拼接逻辑,像这样: ``` computed: { numbersWithNewLine() { return this.numbers.map((number) => `\n${number}`).join(''); }, }, ``` 这样,每个数字前都会添加一个换行符,然后再将它们连接成一个字符串。 ### 回答2: 在Vue,我们可以使用正则表达式来匹配数字,并在数字前添加换行符。首先,我们需要在Vue组件的data属性定义一个字符串变量,用于存储包含数字的文本。然后,我们可以通过正则表达式的replace方法来实现匹配数字并添加换行符的功能。 假设我们的数字文本为:var text = "1a2b3c4d5e6f7g8h9i0"; 我们想要在数字前添加换行符,我们可以使用如下的Vue方法: 1. 创建一个Vue实例: const app = new Vue({ el: '#app', data: { text: "1a2b3c4d5e6f7g8h9i0" }, methods: { addLineBreak() { this.text = this.text.replace(/\d/g, "\n$&"); } } }); 2. 在HTML调用方法,并显示结果: <div id="app"> <button @click="addLineBreak">添加换行符</button> <p>{{ text }}</p> </div> 在上述代码,我们定义了一个名为addLineBreak的方法,当按钮被点击,该方法将会被调用。方法,我们使用了正则表达式/\d/g来匹配所有的数字,并使用replace方法在数字前添加了一个换行符。最后,我们通过双花括号语法{{ text }}来显示修改后的文本。 当我们点击按钮,即可在数字前添加换行符的效果。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值