html引入UI库vant

最新推荐文章于 2024-02-20 16:19:32 发布

i_am_a_div_日积月累_

最新推荐文章于 2024-02-20 16:19:32 发布

阅读量1.6k

点赞数

分类专栏： vue element-ui

本文链接：https://blog.csdn.net/i_am_a_div/article/details/119344174

版权

vue 同时被 2 个专栏收录

109 篇文章 5 订阅

订阅专栏

element-ui

59 篇文章 5 订阅

订阅专栏

vant地址

注意html中不支持单标签元素元素标签必须是闭合标签

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
</head>

<body>
  <div id="app">
    <div>
      <van-button type="primary">按钮</van-button>
      <div>{{show}}</div>
      <div>1234</div>
      <!-- 注意html中不支持单标签元素 </van-cell>  元素标签必须是闭合标签 <van-cell> </van-cell> -->

      <van-cell title="选择单个日期" :value="date" @click="aaaa"></van-cell>
      <van-calendar v-model="show" @confirm="onConfirm"></van-calendar>
    </div>
  </div>

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

  <script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
      el: '#app',
      data() {
        return {
          date: '',
          show: false,
        }
      },
      methods: {
        aaaa() {
          this.show = true
        },
        formatDate(date) {
          console.log(1)
          return `${date.getMonth() + 1}/${date.getDate()}`
        },
        onConfirm(date) {
          this.show = false
          this.date = this.formatDate(date)
        },
      },
    })

    // 调用函数组件，弹出一个 Toast
    vant.Toast('提示')

    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    Vue.use(vant.Lazyload)
  </script>
</body>

</html>

i_am_a_div_日积月累_

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html引入UI库vant

vant地址注意html中不支持单标签元素元素标签必须是闭合标签 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫

专栏目录