vue+vant组件Radio使用

灰太狼的情与殇 发布于 今天 02:15

1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到vant中的Radio组件,下面我来简单的分享一下使用方法,希望对你有所帮助.
4.废话不多说,直接上代码:

如果你使用的是按需导入的模式,在main.js中添加如下代码
import { Switch,Button,Radio,RadioGroup,Cell, CellGroup } from 'vant';
Vue.use(Switch);
Vue.use(Button);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Cell);
Vue.use(CellGroup);

5.在template中添加如下代码:

<van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell title="单选框 1" clickable @click="chenradio1">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="单选框 2" clickable @click="chenradio2">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

6.在return中添加如下代码:

radio: '1',

7.在methods中添加如下代码:

chenradio1() {
this.radio = "1";
console.log("我触发了点击事件一");
},
chenradio2() {
this.radio = "2";
console.log("我触发了点击事件2");
}

8.效果图如下:

9.当然也可以使用官方的写法,只是个人习惯这个写,根据自己的需求进行调整.
10.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰.