第一步下载:swiper库
npm i swiper
全部的代码如下:
<template>
<div id="app">
<!-- swiper轮播图 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://tpc.googlesyndication.com/simgad/17955358767017347840?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4ql7j96pXG8i7q5C_6pUV4DC4Y2EEg" alt="">
</div>
</div>
</div>
<div class="test">
测试主页面
<chldren1 v-model="msg"></chldren1>
<p>父组件该的值{{msg}}</p>
<button @click="fn">父组件该的值</button>
</div>
<Navgation></Navgation>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import chldren1 from './children/index'
import Navgation from '@/components/Navigation'
export default {
data(){
return{
msg:1,
el:'#app',
}
},
directives:{
myAdmin:{
inserted(el){
console.log("el:",el)
}
}
},
mounted(){
var swiper = new Swiper('.swiper-container',{
autoplay:true,
// 解决有数据,但轮播图不动的问题
// 方法一
observer:true,
// 方法二
// observeParents:true
})
},
methods: {
fn(){
this.msg+=1
}
},
components:{
Navgation,
chldren1
}
}
</script>
<style lang="less" scoped>
.test{
font-size: 16px;
}
</style>
网友评论