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, 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 = falsethis.date = this.formatDate(date)},},})// 调用函数组件，弹出一个 Toastvant.Toast('提示')// 通过 CDN 引入时不会自动注册 Lazyload 组件// 可以通过下面的方式手动注册Vue.use(vant.Lazyload)</script>
</body></html>