vue---占位符渲染以及获取v-html的值

最新推荐文章于 2024-11-13 11:52:56 发布

WYG_王雅格

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量732

点赞数

分类专栏： vue 文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/YY_WYG/article/details/131391905

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

端午节前夕，后端返回了一个模板字符串，字符串中有两个占位符，要求将替换掉占位符，弄成一个输入框，让用户在输入框中写入信息如图：

输入金额和使用场景
在这里插入图片描述
输入金额和使用场景

咋说呢，真糟心！！！！下面说下怎么实现吧，其实还是听简单的，就是没弄过这类的需求。

替换占位符

我这是获取单条信息的时候，获取这个模板字符串，如果存在这三个占位符，就给替换掉，自己创建个属性，方便获取对应的值 nameFlag

  getByIdInfo(id).then((res) => {
        if (res.code == 200) {
          this.open = true;
          let reg = /(AMOUNT|USAGE_SCENARIO|EXPIRE_TIME)/g;
          this.msgTele = this.form.smsMsg.replace(reg, (match) => {
            if (match == "AMOUNT") {
              return `<input type="text" nameFlag="amount" class="msgTele"
              v-model="this.amount" placeholder="请输入金额">`;
            } else if (match == "USAGE_SCENARIO") {
              return `<input type="text" nameFlag="usageScenario" class="msgTeleScreen"
              v-model="usageScenario" placeholder="请输入场景">`;
            } else {
              return `<input type="text" nameFlag="exporeTime" class="msgTele" 
              v-model="exporeTime" placeholder="请输入日期">`;
            }
          });
        }
      });

页面渲染

就使用div渲染了，使用v-html进行渲染模板字符串，这里使用了@input进行获取对应的值，使用三个变量接收，目前没找到合适的方法，大佬要是有的话，评论一下

<el-form-item label="短信话术" prop="smsMsg">
    <div class="spanMsgTele" @input="handleChange"  v-html="msgTele"></div>
 </el-form-item>
 
 //获取对应的值
  handleChange(e) {
      let flag = e.target.attributes.nameFlag.value;
      if (flag == "amount") {
        this.amount = e.target.value;
      } else if (flag == "usageScenario") {
        this.usageScenario = e.target.value;
      } else {
        this.exporeTime = e.target.value;
      }
    },

传递参数

后端呢，非要让我把输入的内容拼接到模板字符串中传递过去，我就不明白，为啥不能直接让我传递输入的内容呢，由于是远程对接，我就按他说的来，将变量拼接到模板中。，还是通过匹配占位符进行传递

     let reg = /(AMOUNT|USAGE_SCENARIO|EXPIRE_TIME)/g;
     this.form["smsContent"] = this.form.smsMsg.replace(reg, (match) => {
        if (match == "AMOUNT") {
          return this.amount;
        } else if (match == "USAGE_SCENARIO") {
          return this.usageScenario;
        } else {
          return this.exporeTime;
        }
      });

就这样就可以了，但是呢还有个问题，就是怎么给输入框里面加校验呢，求大佬提供方法！！！