ElementUI 选中(elementui的单选按钮)

在ElementUI中实现单选按钮（Radio）的选中操作，主要是通过绑定v-model来控制选中的值。我们可以通过给<el-radio>组件绑定一个变量，在这个变量中存储需要被选中的值即可完成默认选中或动态改变选中的状态。

基础用法：直接绑定数据

是最简单的方式，就是直接利用v-model指令与el-radio组件进行绑定。例如：

html

  <div>
    <!-- 假设有一个表单项 -->
    
      
        男
        女
      
    
  </div>
</p>


export default {
  data() {
    return {
      form: {
        sex: '男' // 默认选中“男”
      }
    };
  }
};


<p>

在这个例子中，当页面加载时，由于form.sex的值为“男”，所以“男”这个选项会被默认选中。

根据条件动态设置选中项

有时候我们可能需要根据某些条件来决定哪个单选按钮被选中。比如从后端获取到的数据或者用户之前的选择等。我们可以先将这个值存储起来，然后将其赋值给v-model所绑定的那个变量。

html

  <div>
    
      
        {{ color }}
      
    
  </div>
</p>


export default {
  data() {
    return {
      colors: ['红色', '蓝色', '绿色'],
      form: {
        selectedColor: '' // 初始为空
      }
    };
  },
  created() {
    // 模拟从后端获取数据并设置默认选中项
    setTimeout(() => {
      this.form.selectedColor = '蓝色'; // 动态设置选中项为“蓝色”
    }, 1000);
  }
};


<p>

这里使用了created生命周期钩子函数，在组件创建完成后模拟了一个异步请求（用setTimeout代替），然后将form.selectedColor设置为“蓝色”，从而实现了动态设置选中项的效果。

监听选中变化

如果想要在用户点击单选按钮之后执行一些操作，可以使用@change事件监听器来捕获选中状态的变化。

html

  <div>
    
      
        
          音乐
          电影
          运动
        
      
    
  </div>
</p>


export default {
  data() {
    return {
      form: {
        interest: ''
      }
    };
  },
  methods: {
    handleChange(value) {
      console.log(`您选择了：${value}`);
      // 在这里可以添加更多逻辑，如发送网络请求、更新其他数据等
    }
  }
};


<p>

以上就是在ElementUI中关于单选按钮选中的一些常见处理方式。通过这些方法，我们可以轻松地实现单选按钮的功能，并且可以根据实际需求灵活调整其行为。