<template>
<div>
<!-- 使用 van-switch-cell 组件 -->
<van-switch-cell
v-model="switchValue"
title="开关标题"
@change="onSwitchChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 开关状态
switchValue: false,
};
},
methods: {
// 开关状态变化的回调
onSwitchChange(value) {
// 处理开关状态变化的逻辑，value 表示当前的开关状态
console.log('开关状态变化:', value);
},
},
};
</script>
在上述代码中：
- switchValue 是开关的状态，通过 v-model 进行双向绑定。
- title 属性用于设置开关单元格的标题。
- @change 事件回调在开关状态变化时触发，你可以在这里处理开关状态变化的逻辑。
通过这些属性，你可以根据实际需求配置 van-switch-cell 组件的外观和行为。
确保在使用 van-switch-cell 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { SwitchCell } from 'vant';
Vue.use(SwitchCell);
转载请注明出处：http://www.zyzy.cn/article/detail/5711/Vant