支持取消单选组件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前端
相关文章
React router用hooks读取routeName、根据routeName跳转
在迁移Vue至React的过程中遇到了一些路由相关的问题,在Vue项目中经常会使用routeName,毕竟使用path太长了,也记不住,我自己看了看React router也没有发现routeNam 阅读更多…
邮箱收件人组件(vue版)成长历程(一)
前期项目中需要优化原始的收件人、抄送、密送部分,换成更加现代化的样式和用户,当时将这部分抽象成一个组件了,最近的需求是发件人也要使用该组件,鉴于发件人比收件人等需要校验的地方和交互习惯变动点较多,进 阅读更多…
从vuecli3学习webpack记录(零)整体流程
今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手 阅读更多…
从vuecli3学习webpack记录(一)vue-cli-serve机制
最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…
前端框架vue+wordpress做后端
目前正在利用闲暇时捯饬一下自己的博客,毕竟这么久没有维护了,wordpress是可以用restful API来获取数据的,决定前端用vue实现,目前正在尝试中,今天做了其中很小的一部分,就是博客目录 阅读更多…
Vue同一路由跳转页面不刷新解决方案及注意事项之二
之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…