支持取消单选组件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-cli设置css不生效
我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.ba 阅读更多…
vue内置组件keep-alive源码解析
很简单,我们直接看vue的源码即可。 keep-alive 组件支持三个属性。 props: { include: patternTypes, exclude: patter 阅读更多…
从vuecli3学习webpack记录(一)vue-cli-serve机制
最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…
项目Vue转成React hooks可能存在的问题--急需类似setState回调
假设在Vue中有如下三个方法,并且初始时 this.a = ‘a’; this.b = ‘b’; funA() { this.a = '1221 阅读更多…
vue多语言的解决方案不只是 vue-i18n,前端+后端完整解决方案
网上搜很多vue多语言的,一般都是介绍vue-i18n怎么使用,当然这是不错的,但是我们如果只是讲这个的话,只是解决了静态文字的多语言化。 这一部分我们也简单讲一下 npm install 阅读更多…
Vue在chrome44偶现点击子元素事件无法冒泡
公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…