v-decorator和v-model的使用对比

原创已于 2024-02-20 16:21:50 修改 · 2.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#v-decorator #v-model

于 2024-02-20 16:16:41 首次发布

web前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue.js框架中的v-model和v-decorator指令，分别阐述了它们在数据绑定和表单验证中的作用，以及v-decorator在AntDesignVue中的应用和后续版本的废弃情况。还提供了这两个指令的使用示例。

v-model 和 v-decorator 都是在 Vue.js 框架中使用的指令，但它们的功能和用途有所不同。

v-model 是 Vue.js 的一个核心特性，用于在 input、textarea 元素和组件上创建双向数据绑定。这意味着数据和视图是同步的：当数据改变时，视图也会更新；反之亦然。v-model 主要用于处理表单元素和用户输入，可以简化很多手动更新数据和视图的操作。

v-decorator 是 Ant Design Vue 中的一个指令，主要用于表单验证和提交。它通常用于下的控件上，如、等。v-decorator 接收一个数组作为参数，其中包含了字段名、验证规则等属性。这使得开发者可以很方便地为表单元素添加验证功能，而无需编写大量的验证逻辑。此外，v-decorator 还可以与 v-model 一起使用，实现表单数据的双向绑定和验证。

然而，需要注意的是，v-decorator 在 Ant Design Vue 的后续版本中已经被废弃，取而代之的是 v-model 和 :rules 的组合使用。这是因为 Vue.js 本身提供了强大的双向数据绑定和表单验证功能，而 v-decorator 的存在可能会导致一些不必要的复杂性和冗余。

总的来说，v-model 和 v-decorator 的主要区别在于它们的功能和用途：

v-model 主要用于双向数据绑定，
v-decorator 主要用于表单验证和提交（但在 Ant Design Vue 的后续版本中已经被废弃）。

1、v-decorator的使用示例：

    <a-card :bordered="false" title="上传升级包" class="mb20" hoverable>
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="appName"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea
            rows="1"
            placeholder="请输入App Name"
            v-decorator="['appName', { rules: [{ required: true, message: '请输入 App Name' }] }]"
          />
        </a-form-item>

        <a-form-item
          label="appId"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea
            rows="1"
            placeholder="请输入App ID"
            v-decorator="['appId', { rules: [{ required: true, message: '请输入 App ID' }] }]"
          />
        </a-form-item>
        
        <a-form-item
          label="更新说明"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
      
          <a-button htmlType="submit" type="primary">更新版本</a-button>
        </a-form-item>
      </a-form>
    </a-card>

export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },

  methods: {
	handleSubmit(e) {
      e.preventDefault()
      const that = this

      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)

          let time = moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
          console.log('时间：' + time)
        }
      })
    },
  },
  }
  }

2、v-model的使用示例：

<template>  
  <a-form :model="formModel" :rules="rules" ref="form">  
    <a-form-item name="textareaContent" label="文本区域">  
      <a-textarea v-model="formModel.textareaContent" rows="4" />  
    </a-form-item>  
    <a-form-item>  
      <a-button type="primary" @click="handleSubmit">提交</a-button>  
    </a-form-item>  
  </a-form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formModel: {  
        textareaContent: '',  
      },  
      rules: {  
        textareaContent: [  
          { required: true, message: '请输入文本内容', trigger: 'change' },  
          { min: 5, message: '文本内容至少为5个字符', trigger: 'change' },  
          { max: 20, message: '文本内容不能超过20个字符', trigger: 'change' },  
        ],  
      },  
    };  
  },  
  methods: {  
    handleSubmit() {  
      this.$refs.form.validate((err, values) => {  
        if (!err) {  
          console.log('表单验证通过', values);  
          // 在这里处理表单提交逻辑  
        }  
      });  
    },  
  },  
};  
</script>