浅析 v-model

 简易的双向绑定

改内存，页面会变化，改页面，内存变化

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <p>
      <button @click="message ='simpson'">set message to simpson</button>
    </p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      message: 'hi'
    }
    },
  components: {
  }
}
</script>

复选框

<template>
  <div id="app">
    爱好： {{ x }}}
    <label>
      <input type="checkbox" v-model="x" :value="1">
      <span>抽烟</span>
    </label>
    <label>
      <input type="checkbox" v-model="x" :value="2">
      <span>喝酒</span>
    </label>
    <label>
      <input type="checkbox" v-model="x" :value="3">
      <span>烫头</span>
    </label>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      x: []
    }
  },
  components: {}
}
</script>

单选框

<template>
  <div id="app">
    爱好： {{ x }}
    <label>
      <input name="want" type="radio" v-model="x" :value="1">
      <span>抽烟</span>
    </label>
    <label>
      <input name="want" type="radio" v-model="x" :value="2">
      <span>喝酒</span>
    </label>
    <label>
      <input name="want" type="radio" v-model="x" :value="3">
      <span>烫头</span>
    </label>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      x: ""
    }
  },
  components: {}
}
</script>

选择框

<template>
  <div id="app">
    你想要： {{ x }}
    <hr/>
    <select v-model="x">
      <option value>-</option>
      <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option>
    </select>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      array: [
        {text: "抽烟", value: 1},
        {text: "喝酒", value: 2},
        {text: "烫头", value: 3}
      ],
      x: ""
    }
  },
  components: {}
}
</script>

form 表单

<template>
  <div id="app">
  <form @submit.prevent="onSubmit()">
    <label>
      <span>用户名</span>
      <input type="text" v-model="user.username">
    </label>
    <label>
      <span>密码</span>
      <input type="text" v-model="user.password">
    </label>
    <button type="submit">登陆</button>
  </form>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
     user: {
       username:"",
       password:""
     },
      x: []
    }
  },
  methods: {
    onSubmit() {
      console.log(this.user)
    }
},
components:{}
}
</script>

自制一个 MyInput

<template>
  <div class="red wrapper">
    <input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
  </div>
</template>

<script>
export default {
  name:'MyInput',
  props:{
    value:{
      type:String
    }
  }
}
</script>

<style scoped>
.red{
  background: red;
}
.wrapper {
  display: inline-block;
}
</style>

<template>
  <div id="app">
    {{user}}
    登陆
  <form @submit.prevent="onSubmit()">
    <label>
      <span>用户名</span>
      <MyInput v-model="user.username"/>
    </label>
    <label>
      <span>密码</span>
      <input type="password" v-model.trim="user.password">
    </label>
    <button type="submit">登陆</button>
  </form>
  </div>
</template>

<script>
import MyInput from "./MyInput";
export default {
  components:{MyInput},
  name: 'App',
  data() {
    return {
     user: {
       username:"",
       password:""
     },
      x: []
    }
  },
  methods: {
    onSubmit() {
      console.log(this.user)
    }
},
}
</script>

<style>

</style>

v-model 是 v-bind:value 和 v-on:input 的语法糖

原生组件

• v-on:input="xxx = event.target.value"

自定义组件

• v-on:input="xxx = event"

使用 ant-design-vue 的 input

<template>
  <div id="app">
    <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit.prevent="onSubmit"
    >
      <a-form-item>
        <a-input
            v-decorator="[
          'username',{rules:[
              {requireL:true,message:'你丫没写username'}
          ]}]"
            placeholder="用户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
            v-decorator="[
          'password',
          { rules: [{ required: true, message: '你丫没填密码' },
              {min:8,message:'密码最少8个字符'},
              {pattern:/[a-zA-Z]/,message:'必须包含至少一个字母'}
              ] },
        ]"
            type="password"
            placeholder="密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-button type="primary" html-type="submit" class="login-form-button">
        登陆
      </a-button>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods:{
    onSubmit(e){
      console.log(e)
      this.form.validateFields((error, values) => {
        if (!error) {
          console.log('data: ', values);
        }else{
          console.log("error: ",error)
        }
      });
    }
  }
}

</script>

<style>

</style>