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

    快速入门Vue

    本篇文章主要介绍了如何快速入门Vue的方法,对0基础学习Vue的朋友会很有帮助,跟着小编一起来看下吧
    2016-12-12
  • vue生成文件本地打开查看效果的实例

    vue生成文件本地打开查看效果的实例

    今天小编就为大家分享一篇vue生成文件本地打开查看效果的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VueCli4项目配置反向代理proxy的方法步骤

    VueCli4项目配置反向代理proxy的方法步骤

    这篇文章主要介绍了VueCli4项目配置反向代理proxy的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue-router传参用法详解

    vue-router传参用法详解

    今天小编就为大家分享一篇关于vue-router传参用法详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue动画效果实现方法示例

    vue动画效果实现方法示例

    这篇文章主要介绍了vue动画效果实现方法,结合完整实例形式分析了vue.js+animate.css实现的动画切换效果相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • vue 开发企业微信整合案例分析

    vue 开发企业微信整合案例分析

    这篇文章主要介绍了vue 开发企业微信整合,结合具体案例形式分析了vue.js使用企业微信JSSDK实现手机端程序可以和企业微信进行整合功能的相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • vue 兄弟组件的信息传递的方法实例详解

    vue 兄弟组件的信息传递的方法实例详解

    这篇文章主要介绍了vue 兄弟组件的信息传递的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 在vue中使用G2图表的示例代码

    在vue中使用G2图表的示例代码

    这篇文章主要介绍了在vue中使用G2图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 理顺8个版本vue的区别(小结)

    理顺8个版本vue的区别(小结)

    这篇文章主要介绍了理顺8个版本vue的区别(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 关于vue项目中搜索节流的实现代码

    关于vue项目中搜索节流的实现代码

    这篇文章主要介绍了关于vue项目中搜索节流的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论