Vue中指令v-model的原理及使用方法

v-model的原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。

作用：提供数据的双向绑定

• 数据变，视图跟着变 :value
• 视图变，数据跟这变 @input

注意：$event用于在模板中获取事件的形参。

<template>
	<div id="app">
    	<input v-model="msg" type="text">
    <input :value="msg" @input="msg = $event.target.value" type="text" name="" id="">
  	</div>
</template>

表单类组件封装 & v-model简化代码

• 表单类组件封装

  父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据

  子传父：监听输入，子传父传值给父组件修改

  父组件（使用）：

  <BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>
  

  子组件（封装）：

  <select :value="cityId" @chang="handleChange">...</select>
  

  props: {
  	cityId: String
  },
  

  methods: {
  	handleChange (e) {
  		this.$emit('事件名', e.target.value)
  	}
  }
  

• 父组件v-model简化代码，实现子组件和父组件数据双向绑定。

  子组件中：props通过value接收，事件触发input

  父组件中：v-model给组件直接解绑数据（:value+@input）

  父组件（使用）：

  <BaseSelect v-model="selectId"></BaseSelect>
  

  子组件（封装）：

  <select :value="cityId" @chang="handleChange">...</select>
  

  props: {
  	value: String
  },
  methods: {
      handleChange (e) {
          this.$emit('input', e.target.value)
      }
  }

附：v-model结合radio类型使用

radio单选框的属性是互斥的，如果使用v-model，可以不使用name就可以互斥。

v-model绑定sex属性，初始值为“男”，选择女后sex属性变成“女”，因为此时是双向绑定。

 <div id="app">
    <!-- name属性radio互斥 使用v-model可以不用name就可以互斥 -->
    <label for="male">
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <div>你选择的性别是：{{sex}}</div>
 
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        sex:"男"
      },
 
    })
  </script>

总结 

到此这篇关于Vue中指令v-model的原理及使用方法的文章就介绍到这了,更多相关Vue 指令v-model原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论