vue.js格式使用vant-页面引入3
2023-09-11 14:19:04 时间
一、双列显示
如图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } html, body { overflow: auto; background-color: #f7f8fa; } </style> </head> <body> <div id="app"> </div> <!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容--> <template id="first"> <div> <van-nav-bar fixed title="数据列表" right-text="退出登录"></van-nav-bar> <van-popup v-model="show" position="center" :overlay="true" transition="0s easing"> <div class='picker_box'> <p class='set'>设置店铺折扣率</p> <div class='num'> <span class='shi'>{{shi}}</span> <span>.</span> <span class='ge'>{{ge}}</span> <span>折</span> </div> <van-picker :columns="columns" :visible-item-count=3 @cancel="onCancel" @confirm="onConfirm" @change="onChange" /> </div> </van-popup> </div> </template> <script> const citys = { '1': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], '2': ['2'], '3': ['3'], '4': ['4'], '5': ['5'], '6': ['6'], '7': ['7'], '8': ['8'], '9': ['9'], }; let vm = new Vue({ el: "#app", data: { shi: "", ge: "", show: true, columns: [ { values: Object.keys(citys), className: 'column1' }, { values: citys['1'], className: 'column2' } ] }, template: "#first", //通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签 methods: { //切换tab xian() { this.show = true; }, onCancel() { }, onConfirm() { } , onChange() { } }, mounted() { }, destroyed() { }, }); </script> </body> </html>
相关文章
- vue - config(index.js)
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
- 【Vue/Js】如何判断json对象为空或undefined未定义?(已解决)
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- vue-property-decorator初探
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- JavaScript - math.js 数学库,实现 math.add() “数字累加“ 计算总和的操作(例如:循环 N 个整数或小数,然后再循环内 “+=“ 叠加算数)适用于Vue等全部前端项目
- JavaScript - 判断今天是星期几(周几 / 礼拜几),适用于 Vue.js uni-app Nuxt.js 等前端项目
- Vue: parent component get child component data using slot & v-bind
- hybrid cordova+vue开发APP(一) 环境搭建
- Vue.js中this.$nextTick()的使用
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- JS模板引擎handlebars.js的简单使用
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
- vue中封装一个全局的弹窗js
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- SpringBoot+Vue实现的文件管理系统 附带详细运行指导视频
- SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目 图片上传并查看功能实现汇总
- 【前端】Vue.js资源分享
- vue项目开发中遇到的几个问题
- webpack中require.context自动化注册,vue应用