Vue2-表单与v-model

1.Vue表单使用

表单输入绑定：表单输入绑定 — Vue.js

#v-model双向数据绑定

new Vue({
  template: `
    <div>
      /* 用户修改 , vue-data数据同步修改(内存) */
      <input v-model="message" placeholder="edit...">
      <p>message: {{message}}</p>

      /* vue-data数据修改 , 页面同步修改 */
      <button @click="message='Hi,message'">reset message</button>
    </div>
  `,
  data:{
    message:""
  },
}).$mount("#app");

#表单-复选框checkbox

new Vue({
  template: `
    <div>
      student name:{{checkedNames}}
      <br/>

      /* 复选框 v-model 同数组表示一组复选框, value 值作为元素值被传入数组 */
      <label>
        <input type="checkbox" v-model="checkedNames" value="Jack">
        <span>Jack</span>
      </label>
      <label>
        <input type="checkbox" v-model="checkedNames" value="John">
        <span>John</span>
      </label>
      <label>
        <input type="checkbox" v-model="checkedNames" value="Mike">
        <span>Mike</span>
      </label>
    </div>
  `,
  data:{
    checkedNames: []
  },
}).$mount("#app");

##不同的表单类型 type 值不同
##Vue表单的 data 值接受类型不同[文档规定]

#表单-下拉框selected(v-for 渲染动态选项)

new Vue({
  template: `
    <div>
      <span>Selected: {{ selected }}</span>
      <br/>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        /* vue 使用 key 属性跟踪和更新元素 */
        <option v-for="option in options" v-bind:value="option.value" :key="option.value">
          {{ option.text }}
        </option>
      </select>
    </div>
  `,
  data:{
    options:[
      {text:"grade A",value:1},
      {text:"grade B",value:2},
      {text:"grade C",value:3},
    ],
    selected: '1'
  },
}).$mount("#app");

#表单-表单form(submit 提交数据)

new Vue({
  template: `
    <div>
      {{user}}

      /* form+button 默认自动刷新页面 */
      <form @submit.prevent="onSubmit">
        <label>
          <span>user name:</span>
          <input type="text" v-model="user.username"/>
        </label>
        <label>
          <span>password:</span>
          <input type="password" v-model="user.password"/>
        </label>
        <button type="submit">login</button>
      </form>
    </div>
  `,
  data:{
    user:{
      username:'',
      password:''
    }
  },
  methods:{
    onSubmit(){
      console.log(this.user)
    }
  }
}).$mount("#app");

2.表单修饰符

#.lazy修改数据同步方式(多用于富文本编辑器)

new Vue({
  template: `
    <div>
      <span>username: {{username}}</span>
      <br/>
        <label>
          <input type="text" v-model.lazy="username"/>
        </label>
    </div>
  `,
  data:{
    username:""
  },
}).$mount("#app");

##input事件: 键盘,鼠标,任何输入设备的输入[输入时触发]
##change事件: 只在 input失去焦点 时触发[输入完成后触发]

#.number输入值转为 Number 类型(64位浮点数-双精度)

new Vue({
  template: `
    <div>
      <span>userage: {{userage}}</span>
      <br/>
        <label>
          /* .number 自动调用 parseFloat() 解析数据 */
          <input type="text" v-model.number="userage"/>
        </label>
    </div>
  `,
  data:{
    userage:0,
  },
}).$mount("#app");

#.trim过滤首尾空格

new Vue({
  template: `
    <div>
      <span>username: {{username}}</span>
      <br/>
        <label>
          <input type="text" v-model.trim="username"/>
        </label>
    </div>
  `,
  data:{
    username:"",
  },
}).$mount("#app");