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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
js实现上传图片及时预览
May 07 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
vue实现商城秒杀倒计时功能
Dec 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php 在线打包_支持子目录
2008/06/28 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Javascript的this详解
2019/03/23 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
win7安装python生成随机数代码分享
2013/12/27 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python远程连接MySQL数据库
2019/04/19 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
浅谈python 类方法/静态方法
2020/09/18 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
教职工代表大会主持词
2014/04/01 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python