Web前端小课堂2——表单关联及计算属性computed

表单关联

案例一：

姓名（水平排列的表单）

1.创建文件：右键base——新建文件——起名3-model-form.html
2.bootstrap——3——全局css样式——表单——水平排列的表单

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

3.bootstrap——3——组件——面板

//面板
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

4.双向绑定：v-model=‘name’（name是Vue里的name）
实现数据传到表单input上

实现表单影响数据{ {name}}–插入文本

性别（内联单选）

bootstrap——3——全局css样式——表单——内联单选

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

shift+alt+鼠标左键：实现两行一起删
value=“man”：man是要传的值
双向绑定：v-model=‘gender’（gender是Vue里的gender）
注：两个按钮的name要一致（name=“gender”）

年龄（输入框）

双向绑定：v-model=“age”（age是Vue里的age）
bootstrap——3——全局css样式——表单——输入框

<input type="text" class="form-control" placeholder="Text input">

注意：要设置年龄范围1-99且不可输入负数字母等不符合年龄的值
前台表单验证用js正则表达式—正则验字符串
计算属性computed：再取一个属性ruleAge类似于age但ruleAge是需要计算的
ruleAge一定需要处理所以有方法function (){}
var reg = new RegExp(" ^ [0-9]*$");在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

字符	说明
^	以谁开始
$	以谁结束
星号*	占位符（取0个或者多个）

this.age一定要加this

computed: {
                ruleAge: function () {
                    var reg = new RegExp("^[0-9]*$");
                    if (!reg.test(this.age)) {
                        return '';
                    }
                    if (this.age < 0 || this.age > 100) {
                        return '';
                    }
                    return this.age;
                }
            }

学历（下拉列表（select））

双向绑定：v-model=“education”（education是Vue里的education）
bootstrap——3——全局css样式——表单——下拉列表（select）

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

爱好（多选框）

双向绑定：v-model=“hobbies”（hobbies是Vue里的hobbies）
bootstrap——3——全局css样式——表单——多选框

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>