<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/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/vant@2.2/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>
