如何解决响应性在 Vue 组件中不起作用
我正在 Laravel + Vue 旅游网站开发项目。
当我将 html 页面分解成 vue 组件块时,我的网页的响应速度不理想。
下面是纯粹从laravel的blade文件加载页面时的截图:
... </div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="other-deals owl-carousel" id="quicklink">
<div class="item otherdeals">
<a href="#">
<p>Amusment Park</p>
<img src="assets/images/amusmentpark.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Gardens,Zoo Aquariums</p>
<img src="assets/images/gardenszoo.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Iconic Structures & Buldings </p>
<img src="assets/images/iconic.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Day Trips & Tours</p>
<img src="assets/images/daytrip.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Live Show & Concerts</p>
<img src="assets/images/liveshow.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Amusment Park</p>
<img src="assets/images/amusmentpark.png">
</a>
</div>
</div>
</div>
</div>
</div>
</section>.....
以下是我创建上图中突出显示部分的组件时的屏幕截图:
...</section>
<themefilter></themefilter>
...<section>
themefilter.vue:
<template>
<div>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="other-deals owl-carousel" id="quicklink">
<div class="item otherdeals">
<a href="#">
<p>Amusment Park</p>
<img src="assets/images/amusmentpark.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Gardens,Zoo Aquariums</p>
<img src="assets/images/gardenszoo.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Iconic Structures & Buldings </p>
<img src="assets/images/iconic.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Day Trips & Tours</p>
<img src="assets/images/daytrip.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Live Show & Concerts</p>
<img src="assets/images/liveshow.png">
</a>
</div>
<div class="item otherdeals">
<a href="#">
<p>Amusment Park</p>
<img src="assets/images/amusmentpark.png">
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: 'themefilter',props : [],data: function(){
},methods:{
applyCarousel:function(){
var t = this;
$('#quicklink').owlCarousel({
loop: true,items:1,margin: 5,dots: false,stagePadding: 0,nav: true,navText: ['<span aria-label="PrevIoUs" class="prevslider"><</span>','<span aria-label="Next" class="nextslider"><</span>'],responsive:{
0:{
items: 1
},600:{
items: 5
},1000:{
items: 5
}
}
});
}
},mounted() {
this.applyCarousel();
}
};
</script>
有谁知道我该如何解决这个问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。