Vue组件简单入门

Form表单

在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio。ref写在最外层。

<el-form ref="form" :model="form" label-width="80px">
    ****各种类型的表单控件
</el-form>

参考:http://element-cn.eleme.io/#/zh-CN/component/form

Input 输入框

#Form表单中
<el-form-item label="活动名称">
   <el-input v-model="form.name"></el-input>
</el-form-item>

#单独
<el-input v-model="input" placeholder="请输入内容"></el-input>

Select 选择器

设置v-model绑定变量,v-model的值为当前被选中的el-option的 value 属性值。

 #Form表单中,下拉框中的内容为区域1、区域2
<el-form-item label="活动区域">
  <el-select v-model="form.region" placeholder="请选择活动区域">
    <el-option label="区域一" value="shanghai"></el-option>
    <el-option label="区域二" value="beijing"></el-option>
  </el-select>
</el-form-item>

#单独
<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。

猜你喜欢

转载自blog.csdn.net/weixin_38645718/article/details/87888421