我怎样才能处理两个 id（1 个 jquery id 和 1 个 vue js id）？

Question

我需要为我使用 jquery id 的产品和显示我使用 vue js 的项目添加一个滑动？那么，我该如何管理这两个..

<script type="text/javascript">
        $(window).load(function() {

          $("#flexiselDemo1").flexisel({ 
...............................................

});
}
<script>

<ul id="flexiselDemo1">
            <li>
                <a href="details.php"><img src="images/f0.jpg" alt=""/></a>
</li>
<li>
........................

这就是我的静态文件的样子并且工作正常。

所以，为了使动态我包含 vue js 来显示数据。现在我的文件看起来像

  <script type="text/javascript">
  new Vue({ 
    el: '#fe' , 
    data: { 
      data: {}, 
    }, 
    mounted() { 

        $(window).load(function() {

          data("mycustomname").flexisel({
                visibleItems: 5,
                animationSpeed: 1000,
                autoPlay: true,
                autoPlaySpeed: 3000,            
                pauseOnHover: false,
                enableResponsiveBreakpoints: true,
                responsiveBreakpoints: { 
                    portrait: { 
                        changePoint:480,
                        visibleItems: 2
                    }, 
                    landscape: { 
                        changePoint:640,
                        visibleItems: 3
                    },
                    tablet: { 
                        changePoint:800,
                        visibleItems: 4
                    }
                }
            });
            });
       var self = this;

              $.ajax({
          url: ',
          data: {
                      },
          type: "POST",
          dataType: 'json',
          success: function (e) { 
            if (e.status == 1) { 
              self.data = e.data; 
              console.log(e.data) 
            }
          }
        });
        console.log(lat);
      }
      function error(err) {
        console.log(err)
      }
    }
  })
</script>

所以，当我显示我的 html 代码时，

<div class="review-slider" id="fe">

            <ul id="flexiselDemo1" data-mycustomname="flexisel">
                <div v-for="row in data">
            <li>{{row.name}}</li>
</div>
                </ul>
</div>

当我这样做时 id="flexiselDemo1" 不起作用并且布局正在完全改变.. 那么，任何人都可以帮我处理这种情况吗？我是js和vue js的初学者..请在这方面有所帮助..

Answer 1

如果更改 ID 会破坏您的代码，为什么不使用数据属性，它完全适用于这样的情况。修改您的标记：

将className添加到ul标签：

<ul id="flexiselDemo1" class="flexis1">

在您的 javascript 中，将 $("#flexiselDemo1") 替换为

$(".flexis1#flexiselDemo1")