elementUi vue el-radio 监听选中变化的实例代码

 更新时间:2019年06月28日 13:50:44   作者:温九月  
这篇文章主要介绍了elementUi vue el-radio 监听选中变化,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

elementUi vue el-radio 监听选中变化的实例代码如下所述:

//change是radio-group标签的事件
<div>
 <el-radio-group v-model="radioSex" @change="changeHandler">
  <el-radio class="radio" label="man">男</el-radio>
  <el-radio class="radio" label="woman">女</el-radio> 
 </el-radio-group>
</div>
export default {
  name: 'Radio',
  data () {
   return {
    radioSex: 'man'
   }
  },
  methods: {
    changeHandler(value) {
      console.log('改变之后的值是:' + value)
    }
  }
 }

ps:下面给大家介绍下vue+elementui下监听屏幕变化并处理对应样式

mounted () {
window.addEventListener('resize', () => {
if (document.body.clientWidth < 900) {
this.tabposition = 'top'
} else {
this.tabposition = 'left'
}
})
}

补充:最好是将监听后对应的操作函数封装起来,然后再页面的销毁程序中对window解除对应监听。

总结

以上所述是小编给大家介绍的elementUi vue el-radio 监听选中变化,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 浅谈vue中get请求解决传输数据是数组格式的问题

    浅谈vue中get请求解决传输数据是数组格式的问题

    这篇文章主要介绍了浅谈vue中get请求解决传输数据是数组格式的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 手动挂载Vue3.0组件到DOM节点的方法

    手动挂载Vue3.0组件到DOM节点的方法

    在VUE应用中,经常会使用一些非vue实现的js库,这些js库可能要求外部传入一些界面DOM节点,本文主要介绍了手动挂载Vue3.0组件到DOM节点的方法,感兴趣的可以了解一下
    2024-08-08
  • vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

    vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

    这篇文章主要介绍了vue-cli 脚手架基于Nightwatch的端到端测试环境的过程,需要的朋友可以参考下
    2018-09-09
  • vue cli4.0 如何配置环境变量

    vue cli4.0 如何配置环境变量

    这篇文章主要介绍了vue cli4.0 如何配置环境变量,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue 中mixin 的用法详解

    Vue 中mixin 的用法详解

    e中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue实现的封装全局filter并统一管理操作示例

    vue实现的封装全局filter并统一管理操作示例

    这篇文章主要介绍了vue实现的封装全局filter并统一管理操作,结合实例形式详细分析了vue封装全局filter及相关使用技巧,需要的朋友可以参考下
    2020-02-02
  • 浅谈VUE uni-app 条件编码和页面布局

    浅谈VUE uni-app 条件编码和页面布局

    这篇文章主要介绍了uni-app 的条件编码和页面布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue3中provide和inject数据修改规则

    Vue3中provide和inject数据修改规则

    在Vue3中,通过inject接收到的数据是否可以直接修改,取决于provide提供的值的类型和响应式处理方式,本文给大家介绍Vue3中provide和inject数据修改规则,感兴趣的朋友一起看看吧
    2025-04-04
  • vue全局指令文件 directives详解

    vue全局指令文件 directives详解

    全局指令是Vue.js中的一种自定义指令,可以在整个应用中重复使用,通过Vue.directive方法定义,可以在组件内部直接使用,指令有多个生命周期钩子,可以接收参数和修饰符,提高代码复用性和可维护性,本文介绍vue全局指令文件directives,感兴趣的朋友一起看看吧
    2025-02-02
  • vue.js实现备忘录功能的方法

    vue.js实现备忘录功能的方法

    下面小编就为大家带来一篇vue.js实现备忘录功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论