支持取消单选组件vue版
支持取消单选组件vue版
原生的单选就是<input type="radio"/>
,正常情况在name
相同的单选之间只能选一个,如果只有一个单选框的情况下,一经选中是无法自己取消的,和checkbox不一样。但是有时我们的需求是需要有一个radio,并且还要支持能选中和取消的。
当radio的被选中的时候,其实它的checked
属性是true
,取消时为false
。并且如果直接设置checked
属性的值也能直接改变radio的选中与否。
我们也可以依此写成个简单的vue组件。
<template>
<input
type="radio"
:id="label"
ref="radio"
@click="onClick"
:value="innerChecked"
/>
</template>
<script>
export default {
name: 'RadioToggle',
props: {
value: Boolean,
label: String
},
data() {
return {
innerChecked: false
};
},
mounted() {
this.innerChecked = this.value;
},
methods: {
onClick() { // 支持单个单选框选中/取消相互切换,选中态与isChecked保持一致
this.innerChecked = !this.innerChecked;
},
updateCheck() {
this.$refs.radio.checked = this.innerChecked;
this.$emit('input', this.innerChecked);
},
},
watch: {
value() {
this.innerChecked = !!this.value;
},
innerChecked() {
this.updateCheck();
}
}
}
</script>
一个简单的vue双向绑定组件就完成了。
- 分类:
- Web前端
相关文章
项目Vue转成React hooks可能存在的问题--急需类似setState回调
假设在Vue中有如下三个方法,并且初始时 this.a = ‘a’; this.b = ‘b’; funA() { this.a = '1221 阅读更多…
命令式组件Message、Dialog的主流写法分析
这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…
邮箱收件人组件(vue版)成长历程(一)
前期项目中需要优化原始的收件人、抄送、密送部分,换成更加现代化的样式和用户,当时将这部分抽象成一个组件了,最近的需求是发件人也要使用该组件,鉴于发件人比收件人等需要校验的地方和交互习惯变动点较多,进 阅读更多…
Vue同一路由跳转页面不刷新解决方案及注意事项之二
之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…
用个数组来理解vue的diff算法(一)
原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…
用在线IDE写vue代码
上周末无意中发现了一个新的在线IDE,网址glitch.com,个人感觉很不错,于是顺便关注了下其它的在线IDE,比如codesandbox.io也不错,没有细看,可能自己已经先入为主的喜欢上glit 阅读更多…