vue: 常见的form表单 自定义组件v-model

直接上代码了，不好写。

        <template>
  <div class="container">
    <form>
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-6">
          <h1>表单</h1>
          <hr>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="text" id="email" class="form-control" v-model.trim="userInfo.email">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" class="form-control" v-model.lazy="userInfo.password">
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input type="number" id="age" class="form-control" v-model.number="userInfo.age">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
          <label for="message">信息</label>
          <br>
          <textarea id="message" rows="5" class="form-control" v-model="message"></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
          <div class="form-group">
            <label for="sendmail">
              <input type="checkbox" id="sendmail" value="SendMail" v-model="sendMail"> 订阅邮箱
            </label>
            <label for="sendInfomail">
              <input type="checkbox" id="sendInfomail" value="SendInfoMail" v-model="sendMail"> 订阅短信
            </label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
          <label for="male">
            <input type="radio" id="male" value="Male" v-model="sex"> 男
          </label>
          <label for="female">
            <input type="radio" id="female" value="Female" v-model="sex"> 女
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
          <label for="priority">下拉菜单</label>
          <select id="priority" class="form-control" v-model="selectItem">
            <option v-for="item in priorities" :key="item" :selected="item == '中'">{{ item }}</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
          <app-switch v-model="switchKey"></app-switch>
 <!-- 使用标签 -->
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
          <button class="btn btn-primary" @click.prevent="submit">提交</button>
        </div>
      </div>
    </form>
    <hr>
    <div class="row" v-if="show">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4>数据展示</h4>
          </div>
          <div class="panel-body">
            <p>邮箱: {{ userInfo.email.length }}</p>
            <p>密码: {{ userInfo.password}}</p>
            <p>年龄: {{ typeof userInfo.age }}</p>
            <p style="white-space:pre">信息: {{ message }}</p>
            <p><strong>订阅</strong></p>
            <ul>
              <li v-for="item in sendMail" :key="item">{{ item }}</li>
            </ul>
            <p>性别: {{ sex }}</p>
            <p>优先级: {{ selectItem }}</p>
            <p>开关: {{ switchKey }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import appSwitch from "./switch.vue"
 // 导入模块
 export default {
 data() {
 return {
        userInfo: {
          email: '123@qq.com',
          password: '',
          age: 18,
        },
        message: '',
        sendMail: [],
        sex: '',
        selectItem: '低',
        switchKey: true,
 // 这里的布尔值用来往子组件中传值
        show: false,
        priorities: ['高', '中', '低'],
      }
    },
 // 注册局部组件
    components: {
      appSwitch: appSwitch
    },
    methods: {
 submit: function() {
 // 整理后台接口
 this.show = true
 // 做了个简单的，使用show可以展示数据
      }
    }
  }
</script>

<style>

</style>


      

input框
v-model修饰符:
v-model.lazy 失去焦点才更新数据 适用于密码框
v-model.trim 删除前后空格 适用于邮箱
v-model.number 使用数字 适用于只要数字的地方

文本域
文本域中也是使用v-model来双向数据绑定
问题: 不能显示回车
原因: html中空格和回车只显示一个空格
解决: 使用css内联样式的white-space:pre; (数据中有回车的，只是显示不出来)

订阅复选框:
使用数组存储订阅的东西
订阅的值是value

单选框:
以前用name来指定是一组
男和女都使用v-model来绑定一个变量的话，vue就知道都是同一个组，就可以单选了

下拉菜单:
使用数组循环给template模板
方法一: 默认选择 在option中:selected="item == '中"会true
方法二: 在select上绑定初始化的值 优先级比方法一高

----------------------------------------------
在自定义的标签中使用vue指令
写一个自定义开关
注册全局部组件
使用了多个class
this.$emit('input', value)研究一下这个东西

提交阻止默认事件
form表单直接提交会跳转 所有取消form表单的默认行为

自定义组件:

        <template>
    <div>
 <!-- <div id="on" @click="isOn = true" :class="{active: isOn}">on</div>
        <div id="off" @click="isOn = false" :class="{active: !isOn}">off</div> -->
        <div id="on" @click="changeParent(true)" :class="{active: isOn}">on</div>
        <div id="off" @click="changeParent(false)" :class="{active: !isOn}">off</div>
    </div>
</template>
<script>
export default {
    props: ['value'],
 data() {
 return {
 // isOn: true
            isOn: this.value
 // 以外界传入的为准
        }
    },
    methods: {
 changeParent(value) {
 this.isOn = value
 this.$emit('input', value)
 // 触发input事件
        }
    }
}
</script>
<style scoped>
 #on, #off{
 width: 40px;
 height: 24px;
 background-color: lightgray;
 display: inline-block;
 text-align: center;
 line-height: 24px;
 margin: 10px 0;
 cursor: pointer;
    }
 #on:hover, #on.active{
 background-color: lightgreen;
    }
 #off:hover, #off.active{
 background-color: lightcoral;
    }
</style>