首页>>表单>>基于element-ui的单选(2020-04-21)

基于element-ui的单选

基于element-ui的单选
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="myVue">  
  2.     <p>1.基础用法</p>  
  3.     <template>  
  4.       <el-radio v-model="radio" label="1">备选项</el-radio>  
  5.       <el-radio v-model="radio" label="2">备选项</el-radio>  
  6.     </template>  
  7.     <p>2.禁用状态</p>  
  8.     <template>  
  9.       <el-radio disabled v-model="radio1" label="禁用">禁用项</el-radio>  
  10.       <el-radio v-model="radio1" label="选中且禁用">备选项</el-radio>  
  11.     </template>  
  12.     <p>3.单选框组</p>  
  13.     <template>  
  14.       <el-radio-group v-model="radio2">  
  15.         <el-radio :label="3">备选项</el-radio>  
  16.         <el-radio :label="6">备选项</el-radio>  
  17.         <el-radio :label="9">备选项</el-radio>  
  18.       </el-radio-group>  
  19.     </template>  
  20.     <p>4.按钮样式</p>  
  21.     <template>  
  22.       <div>  
  23.         <el-radio-group v-model="radio3">  
  24.           <el-radio-button label="上海"></el-radio-button>  
  25.           <el-radio-button label="北京"></el-radio-button>  
  26.           <el-radio-button label="广州"></el-radio-button>  
  27.           <el-radio-button label="深圳"></el-radio-button>  
  28.         </el-radio-group>  
  29.       </div>  
  30.       <div style="margin-top: 20px">  
  31.         <el-radio-group v-model="radio4" size="medium">  
  32.           <el-radio-button label="上海" ></el-radio-button>  
  33.           <el-radio-button label="北京"></el-radio-button>  
  34.           <el-radio-button label="广州"></el-radio-button>  
  35.           <el-radio-button label="深圳"></el-radio-button>  
  36.         </el-radio-group>  
  37.       </div>  
  38.       <div style="margin-top: 20px">  
  39.         <el-radio-group v-model="radio5" size="small">  
  40.           <el-radio-button label="上海"></el-radio-button>  
  41.           <el-radio-button label="北京" disabled ></el-radio-button>  
  42.           <el-radio-button label="广州"></el-radio-button>  
  43.           <el-radio-button label="深圳"></el-radio-button>  
  44.         </el-radio-group>  
  45.       </div>  
  46.       <div style="margin-top: 20px">  
  47.         <el-radio-group v-model="radio6" disabled size="mini">  
  48.           <el-radio-button label="上海"></el-radio-button>  
  49.           <el-radio-button label="北京"></el-radio-button>  
  50.           <el-radio-button label="广州"></el-radio-button>  
  51.           <el-radio-button label="深圳"></el-radio-button>  
  52.         </el-radio-group>  
  53.       </div>  
  54.     </template>  
  55.     <p>5.带有边框</p>  
  56.     <template>  
  57.       <div>  
  58.         <el-radio v-model="radio7" label="1" border>备选项1</el-radio>  
  59.         <el-radio v-model="radio7" label="2" border>备选项2</el-radio>  
  60.       </div>  
  61.       <div style="margin-top: 20px">  
  62.         <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>  
  63.         <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>  
  64.       </div>  
  65.       <div style="margin-top: 20px">  
  66.         <el-radio-group v-model="radio9" size="small">  
  67.           <el-radio label="1" border>备选项1</el-radio>  
  68.           <el-radio label="2" border disabled>备选项2</el-radio>  
  69.         </el-radio-group>  
  70.       </div>  
  71.       <div style="margin-top: 20px">  
  72.         <el-radio-group v-model="radio10" size="mini" disabled>  
  73.           <el-radio label="1" border>备选项1</el-radio>  
  74.           <el-radio label="2" border>备选项2</el-radio>  
  75.         </el-radio-group>  
  76.       </div>  
  77.     </template>  
  78. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_853.html