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>
........................

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

所以，为了使动态i包含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 =＆＃34; flexiselDemo1＆＃34;不起作用，布局完全改变..那么，任何人都可以帮我管理这种情况吗？我是js和vue js的初学者..请在这方面提供帮助..

Answer 1

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

将className添加到ul标记：

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

在您的javascript中使用

替换$("#flexiselDemo1")

$(".flexis1#flexiselDemo1")

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

1 个答案: