html使用vant标签栏(多选)


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
    <style>

    style>
head>

<body>
    <div id="vue">
        <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option">
            van-dropdown-item>
            <van-dropdown-item title="筛选" ref="item">
                <van-cell-group>
                    <van-switch-cell v-model="switch1" title="包邮" />
                van-cell-group>
                <van-cell-group>
                    <van-switch-cell v-model="switch2" title="团购" />
                van-cell-group>
                <van-button block type="info" @click="onConfirm">确认van-button>
            van-dropdown-item>
        van-dropdown-menu>
    div>

body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js">script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js">script>
<script>
    new Vue({
        el: '#vue',
        data() {
            return {
                value: 0,
                switch1: false,
                switch2: false,
                option: [
                    { text: '全部商品', value: 0 },
                    { text: '新款商品', value: 1 },
                    { text: '活动商品', value: 2 }
                ]
            }
        },
        mounted() {
        },
        methods: {
            onConfirm() {
                this.$refs.item.toggle();
            }
        }
    });


script>


html>

效果图

html使用vant标签栏(多选)_第1张图片

你可能感兴趣的:(vant,html)