Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >el-radio再次点击取消选中-更新版

el-radio再次点击取消选中-更新版

作者头像
deepcc
发布于 2020-07-14 03:25:13
发布于 2020-07-14 03:25:13
3.4K00
代码可运行
举报
文章被收录于专栏:deepccdeepcc
运行总次数:0
代码可运行

网上一直流传的2种方法,一种复选框方案需求不接受,二种@click.native.prevent不能取消选中,

自己写了备注下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
分析:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@click.native默认会触发2次,但是@click.native.prevent会阻止默认事件,会导致不能取消选中
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
所以我想忽略第一次事件,监听第二次事件做清空操作。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div >

     <el-radio v-model="radio" @click.native="clickitem('1')" label="1"></el-radio>
     <el-radio v-model="radio" @click.native="clickitem('2')" label="2"></el-radio>

    <h1>{{ radio }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      radio: ''
    }
  },
  methods: {
    clickitem (val) {
      console.log(val)
      if (this.flag === true) {
        this.radio === val ? this.radio = '' : this.radio = val
      }
      this.flag = true
      setTimeout(() => {
        this.flag = false
      }, 300)
    }
  }

}
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-07-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
10天从入门到精通Vue(一)-vue基本概念和基础语法(v-text、v-bind、v-on、v-model等)
v-text会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空。v-html会解析文本中的html标签后展示。具体代码如下:
共饮一杯无
2022/11/28
1.5K0
10天从入门到精通Vue(一)-vue基本概念和基础语法(v-text、v-bind、v-on、v-model等)
element-plus 关于 <el-radio-group>单选框一选全选问题
很多同学在使用Element Plus V3版本的单选按钮组时,可能会遇到这样一个问题。任意选择一个单选按钮,会自动将全部按钮选中。出现这个问题,可能是因为你的版本与你的用户不对导致的。
兔云小新LM
2024/10/26
6220
vue3Cron表达式组件
no-vue3-cron仓库地址:https://github.com/wuchuanpeng/no-vue3-cron
风花一世月
2024/03/19
8310
Vue.js 快速上手精华梳理-快速上手核心重点【热门收藏】
vuecli文档 https://cli.vuejs.org/zh/ https://cli.vuejs.org/zh/guide/installation.html
瑞新
2022/01/21
9440
Vue.js 快速上手精华梳理-快速上手核心重点【热门收藏】
Vuex+vue2+ElementUi实现TodoList
爱学习的前端歌谣
2024/05/30
920
Vuex+vue2+ElementUi实现TodoList
前端三大框架之Vue-day02
Vue常用特性 表单基本操作 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 --> <input type="radio" id="male" value="1
用户10169043
2022/11/16
1.6K0
Python-drf前戏38-前端Vue
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
2.4K0
前端成神之路-vue02
Vue常用特性 表单基本操作 表单修饰符 自定义指令 内置指令不能满足我们特殊的需求 Vue允许我们自定义指令 Vue.directive 注册全局指令 <!-- 使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 --> <input type="text" v-focus> <script> // 注意点: // 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.directive('focusA',functio
海仔
2021/03/03
1.9K0
2020前端技术面试必备Vue:(一)基础快速学习篇
本章节,我将带领大家一起刷Vue 技术点,来应对接下来的面试,此次会陆续更新Vue全家桶:Vue VueX Vue-Router ;以及后面时间充足的话,来实现一个Vue项目。
程序员海军
2021/10/11
2K0
2020前端技术面试必备Vue:(一)基础快速学习篇
Vue快速入门(二)
v-for遍历对象,在python中显示的是kv,但是在这里顺序相反,显示的是vk
HammerZe
2022/05/09
3K0
Vue快速入门(二)
图书列表案例
1.图书列表 静态列表效果 基于数据实现模板效果 处理每行的操作按钮(禁止默认行为) 1、 提供的静态数据 数据存放在vue 中 data 属性中 var vm = new Vue({      el: '#app',      data: {        books: [{          id: 1,          name: '三国演义',          date: ''       },{          id: 2,          n
星辰_大海
2022/05/10
1.2K0
Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程
1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮。
朝雨忆轻尘
2019/06/18
2K0
图书列表案例
图书列表案例 静态列表效果 基于数据实现模板效果 处理每行的操作按钮 1、 提供的静态数据 数据存放在vue 中 data 属性中 var vm = new Vue({
梨涡浅笑
2020/12/02
1.4K0
图书列表案例
Vue.js 快速上手精华梳理-快速上手核心重点【建议收藏】
文章目录 Vue.js 快速上手精华梳理 初体验 条件指令 循环指令 处理用户输入 组件初体验 实例 模板语法 计算属性 监听器 Class绑定 Style绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 git提交-vue核心基础完结 彩蛋福利 PS:本文福利首发于公众号「让我遇见相似的灵魂」,获取最新Vue教程资源 回复关键字:Vue 左手代码,右手吉他,这就是天下:如果有一天我遇见相似的灵魂 那它肯定是步履艰难 不被理解 喜黑怕光的。如果可以的话 让我触摸一下吧 它也一样孤独得太久。
瑞新
2020/07/07
1.4K0
Vue-i18n 国际化
上边写的当前的语言切换是默认的状态,初始化的时候一定加载的是默认的,比如默认的是中文,无论你后期改成什么状态,最后重新加载时一定是中文
全栈程序员站长
2022/08/15
7640
Vue-i18n 国际化
Vue3项目-生成Cron表达式组件
  最近做的一个vue3项目过程中,需要用到cron表达式功能,而对于普通业务人员,他们是不懂cron表达式规则的,所以需要做一个可手动配置生成cron表达式的功能。从网上查找了一些相关资料,然后结合vue3+Element Plus,改造成适合自己项目的组件。记录代码如下:
用户1174387
2022/12/18
5.6K9
Vue3项目-生成Cron表达式组件
十分钟,让你学会Vue的这些巧妙冷技巧
写了两年的Vue,期间学习到好几个提高开发效率和性能的技巧,现在把这些技巧用文章的形式总结下来。
CRMEB商城源码
2022/07/28
7070
Vue—前端框架
3、在外部可以通过vue对象名.属性的方式获取属性值,在vue对象内部,通过this.属性的方式获取属性值
nbsp-nbsp
2020/01/15
7.7K0
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师
IT司马青衫
2022/08/16
1.2K0
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
Element UI极简教程(3):Radio、Checkbox、Input组件的使用
Element UI 的 Radio 使用起来非常简单,直接使用 el-radio 标签即可,属性 v-model 表示该单选框绑定的对象,label 表示该单选框的值,代码如下所示:
南风
2021/12/21
3.2K0
Element UI极简教程(3):Radio、Checkbox、Input组件的使用
相关推荐
10天从入门到精通Vue(一)-vue基本概念和基础语法(v-text、v-bind、v-on、v-model等)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验