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 相关文章推荐
Javascript表格翻页效果的具体实现
Oct 05 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
常用的js方法合集
Mar 10 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
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
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vuex实现及简略解析(小结)
2019/03/01 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python web框架中实现原生分页
2019/09/08 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
10个顶级Python实用库推荐
2021/03/04 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
三年大学自我鉴定
2014/01/16 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
生物工程专业求职信
2014/09/03 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
见习报告的格式
2014/11/04 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android