双向绑定 v-model

芝麻凛 2021年09月27日 131次浏览

v-model

Vue双向绑定:v-model(实际上就是v-bing:value 和 v-on:input的语法糖)

v-model可以实现绑定一个变量,在变量变化的时候UI跟着变化,用户改变UI的时候数据也会跟着变化。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

  • text 和 textarea 元素使用 value property 和 input 事件;
  • checkbox 和 radio 使用 checked property 和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。
// 文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
// 多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
//单复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
// 多复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})
<input type="text" :value="user.usernmae @input="user.username = $event.target.value">
v-on:input="xxx = $envent.target.value"  //原生
v-on:input="xxx = $envent"  //自定义组件

ant-design-vue

引入

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false
Vue.use(Antd)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用

<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: [{ required: true, message: '没写username' }] },
          ]"
          placeholder="用户名"
        >
          <a-icon
            slot="prefix"
            type="user"
            style="color: rgba(0, 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, 0.25)"
          />
        </a-input>
      </a-form-item>
      <a-button type="primary" html-type="submit" class="login-form-button">
        Log in
      </a-button>
    </a-form>
  </div>
</template>

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