Vue3 学习笔记07- v-model 实现表单数据的双向绑定

1. v-model 实现表单数据的双向绑定

v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。

 

 

 v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

1.1 input

(1)在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<template>
  <p>{{ message }}</p>
  <input v-model="message">
</template>


<script>

export default{
  name:'App',
  data(){
    return{
      message: 'Runoob!'
    }
  },
}
</script>

效果图：

 

 (2)复选框的双向数据绑定：

<template>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <br>
    <span>选择的值为: {{ checkedNames }}</span>
</template>
 
 
<script>
export default {
    // V-model实现数据的双向绑定
    data() {
      return {
        checked : false,
        checkedNames: []
      }
    },
    
    
}
</script>
 
<style>
 
</style>

效果图：

 (3)单选按钮的双向数据绑定：

<template>
    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runoob</label>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Google</label>
    <br>
    <span>选中值为: {{ picked }}</span>
</template>
 
 
<script>
export default {
    // V-model实现数据的双向绑定
    data() {
      return {
        picked : 'Runoob'
      }
    },
    
    
}
</script>
 
<style>
 
</style>

效果图：

1.2 select

下拉列表的双向数据绑定：

<template>
    <select v-model="selected" name="fruit">
      <option value="">选择一个网站</option>
      <option value="www.runoob.com">Runoob</option>
      <option value="www.google.com">Google</option>
  </select>
  <br/>
  选择的网站是: {{selected}}
</template>
 
 
<script>
export default {
    // V-model实现数据的双向绑定
    data() {
      return {
        selected: ''
      }
    },
    
    
}
</script>
 
<style>
 
</style>

效果图：