Vue笔记：v-model的使用-CSDN博客

本文链接：https://blog.csdn.net/ma_no_lo/article/details/141575612

一，v-model的基本使用

在了解v-model之前，我们务必要明白v-model本质上是一种语法糖，它其实是由动态属性绑定和input事件绑定而形成的双向数据绑定。

（1）v-model的基本使用

<template>
  <h2>{{ message }}</h2>
  <input type="text" v-model="message">
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  }
}
</script>

<style scoped>

</style>

当表单使用v-model时，v-model会绑定一个变量，这个变量与表单的value是互相影响的，如果我们改变message时，表单的内容（即value）会发生相应的变化。同样地，如果我们手动修改表单的内容，这种影响也会反映到message上，结果就是h2的内容发生变化。

（2）v-model的绑定原理

在看完上方的v-model的使用方式后，如果理解的没问题的话，目前其实是可以跳过这一段的，但是在后面组件v-model得学习原理才能够明白，所以还是推荐这里看一下原理，方便以后理解。

<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="getValue"> 
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  methods:{
    getValue(e){
      this.message = e.target.value
    }
  }
}
</script>

<style scoped>

</style>

或者简化来写：

<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  
}
</script>

<style scoped>

</style>

以上就是v-model的原理，虽然v-model是vue的指令，但尽量还是不要以指令来看待它，只要记住它由两部分组成：动态属性绑定和事件绑定。这样即使后面组件v-model监听事件也不会迷惑。

二， v-model的绑定

接下来的内容比较简单，就是一些元素使用v-model的方法。在前文中我已经使用过text类型的表单类型，剩下的分别为:radio,checkbox,select。

（1）v-model绑定textarea（额外的）

<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  
}
</script>

<style scoped>

</style>

textarea与text表单使用方法一样。

（2）v-model绑定radio

<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
 <label for="football">
  <input type="checkbox" id="football" value="football" v-model="hobbies">足球
 </label>
 <label for="basketball">
  <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">篮球
 </label>
 <label for="tennis">
  <input type="checkbox" id="tennis" value="tennis" v-model="hobbies">网球
 </label>
 <label for="female">
  <input type="radio" id="female" value="female" v-model="gender">男
 </label>
 <label for="male">
  <input type="radio" id="male" value="male" v-model="gender">女
 </label>
 <h2>{{ hobbies }}</h2>
 <h2>{{ gender }}</h2>
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue",
      hobbies:[],
      gender:""
    }
  },
  
}
</script>

<style scoped>

</style>

（3）v-model绑定checkbox

<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
 <label for="football">
  <input type="checkbox" id="football" value="football" v-model="hobbies">足球
 </label>
 <label for="basketball">
  <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">篮球
 </label>
 <label for="tennis">
  <input type="checkbox" id="tennis" value="tennis" v-model="hobbies">网球
 </label>
 <h2>{{ hobbies }}</h2>
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue",
      hobbies:[]
    }
  },
  
}
</script>

<style scoped>

</style>

使用方法和前面差不多。

（4）v-model绑定select

<template>
 <select name="" id="" multiple size="3" v-model="fruits">
  <option value="apple">苹果</option>
  <option value="orange">橘子</option>
  <option value="banana">香蕉</option>
 </select>
 <h2>{{ fruits }}</h2>
</template>

<script>
export default {
  data(){
    return {
      fruits:[]
    }
  },
  
}
</script>

<style scoped>

</style>