v-model ： 通過當然繫結的值與input上的value值來確定當前選中項。
在父作用域中通過active設定當前預設選中項,如果選中項發生改變後通過input事件通知傳遞到父作用域,告知當前選中項.(自定義元件 v-model 資料雙向繫結)
<radio
v-model
="active"
label
="1"
>1
radio
>
<
radio
v-model
="active"
label
="2"
>2
radio
>
<
radio
v-model
="active"
label
="3"
>3
radio
>
<
radio
v-model
="active"
label
="4"
>4
radio
>
<template
>
<
div
class
="el-radio"
>
<
input
type
="radio"
v-model
="model"
:value
="label"
>
<
label
>
<
slot
>預設值
slot
>
label
>
div>
template
>
把radio包裹成一組,通過在radiogroup設定當前選中項.這時需要與radiogroup元件父作用域的active資料形成雙向繫結.
<radiogroup
v-model
="active"
>
<
radio
label
="1"
>1
radio
>
<
radio
label
="2"
>2
radio
>
<
radio
label
="3"
>3
radio
>
<
radio
label
="4"
>4
radio
>
radiogroup
>
<template
>
<
div
class
="el-radio-group"
>
<
slot
>
slot
>
div>
template
>
export default
需要把radio元件部分進行重寫,讓它自己尋找自己的單選框組. 元件 與 元件組 形成資料雙向繫結.
js 多選框 單選框
此多選框 單選框可以換按鈕 只更改雪碧圖的定位即可。沒有使用自帶的控制項，是重新寫的。用到了模組化開發，類的匯出匯入，類的繼承。type module import radio from js radio.js import checkbox from js checkbox.js let hobb...
python Tkinter單選框（五）
一 單選框 from tkinter import root tk v intvar radiobutton root,text one variable v,value 1,pack anchor w radiobutton root,text two variable v,value 2,pac...
純css單選框
1.沒有用bootstrap時 1 has sel,un sel 2 has sel before 9 has sel after 2.使用bootstrap時 因為bootstrap中css設定了 box sizing border box 屬性，所以會影響定位的位置 需要將bottom下移乙個畫...