Vue 全局匹配大括号及其里面的值 == “{关键字符}” 并替换成 input 输入框

Vue 全局匹配大括号及其里面的值 == “{关键字符}” 并替换成 input 输入框

话不多说，直接上代码解释
这是一个将字符串转换为 input的方法，用到的是Vue的开发环境，所有会有this.set等方法

processString(str) {
      let regex = /\{(.*?)\}/g; //匹配{*} 大括号里面任意内容的正则
      let arr = str.match(regex); //字符串匹配出来的数组
      if (!arr) return str;
      let arrNum = arr.map(item => {
        let key = `p${item.substr(1, item.length - 2)}`;  //记录大括号里的值 用作id 方便取值
        if (!this.salaryVars.hasOwnProperty(key)) this.$set(this.salaryVars, key, '');
        str = str.replace(
          new RegExp('\\{' + item.substr(1, item.length - 2) + '\\}', 'g'),
          `<input id='p${item.substr(1, item.length - 2)}' style='border: solid 1px #ccc;width: 50px;height:24px;margin-left:10px' ></input>`
        );
      });   //循环遍历取出所有正则匹配值并转换为input
      return str;
    },

<span v-html='str'></span>

这里需要注意的一点就是Vue语法不支持str字符串直接v-html编译成dom的时候在上面直接挂载指令的。
比如 你想在匹配的input上绑定v-model 和 @change等事件，是不能生效的，楼主已实测。

**欢迎大家加入微信群交流**

今天是从业四年以来第1篇分享文章，也算是个进步吧，一天进步一点点，加油

好，今天的方法就分享到这里，如果各位有什么不明白的，可以在评论下留言，大家一起探讨。我是三井寿，一个永不放弃的男人！