v-model
是 vue 中进行数据双向绑定的指令,v-model
本质就是 :value + input 方法的语法糖。可以通过 model 属性的 prop 和 event 属性来进行自定义。原生的 v-model
,会根据标签的不同生成不同的事件和属性。
例如:
- text 和 textarea 元素使用 value 属性和 input 事件
- checkbox 和 radio 使用 checked 属性和 change 事件
- select 字段将 value 作为 prop 并将 change 作为事件
以输入框为例,当用户在输入框输入内容时,会触发 input 事件,从而更新 value 。而 value 的改变同样会更新视图,这就是 vue 中的双向绑定。
请看以下代码示例:
<template>
<div>
<!-- v-model实际是一个语法糖 -->
<input type="text" v-model="username">
<h2>{
{
username}}</h2>
<!-- 其实就是value绑定变量username,并且input事件中,每次输入的值重新赋值给变量username -->
<!-- $event 就是当前触发事件的对象 -->
<input type="text" :value="username" @input="username=$event.target.value">
<input type="text" :value="username" @input="handleInput">
</div>
</template>
<script>
export default {
data () {
return {
username:"jack"
}
},
methods: {
handleInput(e){
console.log(e)
this.username = e.target.value;
}
},
}
</script>
其实,vue 响应式,主要利用了 Object.defineProperty
方法的特性。
Object.defineProperty
语法:
Object.defineProperty(要定义的对象名,'要定义的属性',{
定义的数据属性});
例如:
let obj = {
username