我正在使用VUE（我是新手）基于数据创建元素，并基于v-model输入更新其内容。我将在下面给出示例代码，但我试图做的是使用一些jQuery/JS来允许用户使用滑块调整每个创建元素中的字体大小。
我的代码可以工作，但是我为每个滑块创建了一个函数，并将其链接到每个创建的组件中的文本（总共6个函数，因为创建的3个内容中的每一个都有两个滑块）。我觉得如果我可以将data（）中使用的name数据附加/前置到函数中目标的类名，我可以将脚本减少到两个函数。
目前我有：

// Vue data

  const bannerApp = Vue.createApp({
    data() {
      return {
        imgSrc: "https://thumbs.dreamstime.com/b/portrait-passport-identity-card-id-driver-licence-to-pretty-woman-134331061.jpg",
        yourName: "Enter Name",
        jobTitle: "Enter Job Title",
        banners: [
          {
            name: "portrait",
            bwidth: 200,
            bheight: 300,
            fontSize1: 10,
          },
          {
            name: "landscape",
            bwidth: 300,
            bheight: 200,
            fontSize1: 12,
          },
          {
            name: "square",
            bwidth: 300,
            bheight: 300,
            fontSize1: 14,
          },
        ],
      };
    },
  }).mount("#BannerApp");
  
// font sliders

  $(".slider1-portrait").on("input", function () {
    $(".portrait-name").css("font-size", $(this).val() + "px");
  });

  $(".slider2-portrait").on("input", function () {
    $(".portrait-title").css("font-size", $(this).val() + "px");
  });

  $(".slider1-landscape").on("input", function () {
    $(".landscape-name").css("font-size", $(this).val() + "px");
  });

  $(".slider2-landscape").on("input", function () {
    $(".landscape-title").css("font-size", $(this).val() + "px");
  });

  $(".slider1-square").on("input", function () {
    $(".square-name").css("font-size", $(this).val() + "px");
  });

  $(".slider2-square").on("input", function () {
    $(".square-title").css("font-size", $(this).val() + "px");
  });

#BannerApp {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.banCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px 10px;
    border: 1px solid;
    flex: 1 1 auto;
    max-width: 100%;
}

.banCont > p {
    margin: 10px 0 0;
}

.banCont > h3 {
    width: 100%;
    text-align: center;
    background: white;
    color: black;
    padding: 10px 0;
}

.banCont input {
    margin: 0 0 10px;
    width: 90%;
    max-width: 500px;
}

.banInner {
    display: flex;
    padding: 20px 10px;
    border: 1px solid grey;
    align-items: center;
    justify-content: space-around;
    background: white;
    color: black;
    overflow: hidden;
    max-width: 90%;
}

input {
    margin: 10px;
    display: block;
}

img {
    max-width: 90%;
    max-height: 100%;
    overflow: hidden;
    border: 1px solid grey;
}

.portrait, .square {
    flex-direction: column;
}

.banInner.landscape {
    aspect-ratio: 200/300;
    height: auto !important;
}

.banInner.landscape {
    aspect-ratio: 300/200;
    height: auto !important;
}

.banInner.square {
    aspect-ratio: 500/500;
    height: auto !important;
}

.landscape {
    flex-direction: row;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: stretch;
    justify-content: end;
}

.content h2 {
    font-size: 16px;
    margin: 10px 0 10px;
    font-weight: 600;
}

.content h3 {
    font-size: 12px;
    margin: 0;
    font-weight: 300;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="BannerApp">
  <div
      v-for="(banner, bannerKey) in banners"
      :key="bannerKey"
      :class="'banCont'"                    
  >
      <h3>{{banner.name}} version</h3>
      <p>Name Size:</p>
      <input :class="'slider1-' + banner.name" type="range" min="10" max="50" value="0" step="1">
      <p>Title Size:</p>
      <input :class="'slider2-' + banner.name" type="range" min="10" max="50" value="0" step="1">

      <div :class="'banInner ' + banner.name" :style="{ width: banner.bwidth+'px', height: banner.bheight+'px' }">                        
          <img :src="this.imgSrc" />
          <div class="content">
              <h2 :class="banner.name + '-name'">{{yourName}}</h2>
              <h3 :class="banner.name + '-title'">{{jobTitle}}</h3>
          </div>
      </div>

  </div>
</div>

• 我没有包括所有的v-model字段或任何自定义它，只是足以显示字体滑块的例子 *

正如你所看到的（希望如此），它可以工作，但是如果我可以更新底部的输入函数，以包括来自VUE data（）的name data（）值，就像这样：
$("'.slider1-' + banners.name").on("input", function () { $("banners.name + '-name'").css("font-size", $(this).val() + "px"); });个
和
$(".slider2-' + banners.name").on("input", function () { $("banners.name + 'title'").css("font-size", $(this).val() + "px"); });个
在我的脑海中，这意味着我只需要创建两个函数，而不是6个函数。问题是，目前在jQuery中并不像在html中那样创建类名，所以你能像我期望的那样将VUE data（）值添加到JS函数中吗？如何添加？
而且，如果有人有更好的方法来做这件事，无论如何都要开火，我只知道它可以更有效。