实训项目 vue常用指令在项目中的应用 vantui组件的使用

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125550389

vue常用指令在项目中的应用 vantui组件的使用

vant网址：

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart

先引入外部样式文件，然后进入vant引入style及样式表，

代码如下：

<!-- 引入外部样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
</head>
<body>
   
    <div id="app">
        <div>
            <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center"/>
        </div>

        <div>
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                  <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
   
        <div>
            <van-tabbar v-model="active">
               <van-tabbar-item icon="home-o">首页</van-tabbar-item>
               <van-tabbar-item icon="search">关注</van-tabbar-item>
               <van-tabbar-item icon="friends-o">简书</van-tabbar-item>
               <van-tabbar-item icon="comment-o">消息</van-tabbar-item>
               <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
   </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                active:1,
                value: '',
                images: [
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                ],
            },
            methods:{

            }

        })
    </script>

<style>
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }

    .van-swipe .van-swipe-item img{
        width: 100%;
        height: 180px;
    }
  </style>

效果图：