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


Posted in Javascript onJune 28, 2019

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 监听选中变化,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 #Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 #Javascript
微信小程序身份证验证方法实现详解
Jun 28 #Javascript
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
You might like
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
python实现决策树分类算法
2017/12/21 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python中time包实例详解
2021/02/02 Python
python实现经典排序算法的示例代码
2021/02/07 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
大学生2014全国两会学习心得体会
2014/03/10 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
置业顾问岗位职责
2015/02/09 职场文书
企业年会祝酒词
2015/08/11 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书