v-model

HQ8806

已于 2022-09-01 21:19:47 修改

阅读量244

点赞数

文章标签：前端 javascript html5

于 2022-09-01 21:16:26 首次发布

本文链接：https://blog.csdn.net/LJM51200/article/details/126649395

版权

vue2

在vue2中 v-model 的实现就是利用v-bind:绑定响应式数据oninput触发事件并传递数据

通过这两个可以view层输入的值影响data里面的数据,data的属性值发生改变也会影响view层的更新

在vue2

常见的就是利用elementui 组件库里的 form表单实现

 <el-form ref="deForm" :rules="rules" :model="form" label-width="120px">
    <el-form-item label="名称" prop="name">
      <el-input
        v-model="form.name"
        style="width: 80%"
        placeholder="1-50个字符"
      />
    </el-form-item>
  </el-form>

export default {
    data() {
     return{
       form: {
        name:''
      }    
    }
  }
  rules:{
    name:[
          { required: true, message: '名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '名称要求1-50个字符',
            trigger: 'blur'
          },
          { validator: validName, trigger: 'blur' }
     ],
  }
}

vue3

<input type="checkbox" v-model="xxxx"/>
          <!--v-model="isAgree" 
            :modelValue
            @update:modelValue
          -->

在v2中，v-model ===> @input, value

在v3中，v-model ===> update:modelValue, modelValue

<script lang="ts" setup name="XtxSwitch">

const props = defineProps({
  modelValue: {
    type: [Boolean, Number, String],
    default: true
  }
})
const emit = defineEmits(['update:modelValue'])
</script>