工作中直接使用vue，组件vant 个人记载

工作中直接使用vue，组件vant 个人记载
1.vant 单选框 Radio RadioGroup 组件绑定change事件

具体实现

<van-radio-group v-model="radio" direction="horizontal" @change="change111">
            <van-radio name="1" shape="square" :disabled = 'isDisabled'>单选框 1</van-radio>
            <van-radio name="2" shape="square">单选框 2</van-radio>
          </van-radio-group>

在 <van-radio-group>标签的属性里面 绑定change事件
@change = ‘方法名称’
然后在vue文件methods 里实现方法

methods: {
    change111(){
          this.isDisabled = true;
      }
  }

同时这里改变值后将disabled 属性变为true,在开始的data里面需要初始化值，isDisabled 默认为false

data() {
return {
  isDisabled:false,
  },

2.在组件上使用v-for

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

官网上面的例子

<van-radio-group v-model="radio" direction="horizontal" @change="change111" >
    <van-radio v-bind:name="item.id" shape="square"   v-for = '(item, index) in items' >{{item.value}}</van-radio>
</van-radio-group>

自己写的例子，
翻译下
首先，v-for 写在那个标签里面，就会循环那个标签
上面就会循环<van-radio> 这个标签，然后下面看下vant组件中<van-radio>标签的属性

重点：上面自己的例子里面有个v-bind:name=“item.id” 的写法，其中name 就是这个组件的属性，所以，可以直接对里面所有属性的都进行赋值，例如

<van-radio v-bind:disabled = "item.isDisabled" v-bind:name="item.id" shape="square"  v-for = '(item, index) in items' >{{item.value}}</van-radio>

上面代码v-bind 中的disabled 是 <van-radio>的属性 那么只要 item这个对象里面的isDisabled属性true的时候，点击事件就被禁用，场景举例，后台返回数据，某个选项没有库存，或者不能选中，只要在返回的对象集合里面添加属性 isDisabled 且为 true（一般在后台处理）