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中更短的 Array 类型转换
Oct 30 Javascript
js style动态设置table高度
Oct 21 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
解决vue项目router切换太慢问题
Jul 19 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Javascript查看大图功能代码实现
2020/05/07 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python制作刷网页流量工具
2017/04/23 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
优秀党支部书记事迹材料
2014/05/29 职场文书
党员自评材料范文
2014/12/17 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
python学习之panda数据分析核心支持库
2021/05/07 Python
详解vue身份认证管理和租户管理
2021/05/25 Vue.js