支持取消单选组件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前端
相关文章
命令式组件Message、Dialog的主流写法分析
这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…
Vue2.6.10源码分析(一)vue项目怎么神奇的跑起来的
先看index.html的代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta 阅读更多…
vue实现自定义组件的v-model双向数据绑定
一般来说我们用v-model是在input中 常见用法如下 <input type="text" v-model="username"> 用户名:{{username}} 其 阅读更多…
用在线IDE写vue代码
上周末无意中发现了一个新的在线IDE,网址glitch.com,个人感觉很不错,于是顺便关注了下其它的在线IDE,比如codesandbox.io也不错,没有细看,可能自己已经先入为主的喜欢上glit 阅读更多…
Vue在chrome44偶现点击子元素事件无法冒泡
公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…
vue发送请求是应该在mounted还是在created生命周期
一个经常会被问到的问题: 为什么不在 created 里去发ajax? created 可是比 mounted 更早调用啊,更早调用意味着更早返回结果,那样性能不是更高? 首先,一 阅读更多…