学习记录：v-model双向绑定

学习一个宝藏博主的文章，练习一下，然后有不理解的地方又自己学习记录一下，非常感谢这位宝藏博主记录了很多知识点文章地址
v-model即是实现表单元素与数据的数据的双向绑定：
我们设置一个简单的例子：

<template>
    <div class="test" id="test" ref="test">
        <input v-model="message" placeholder="edit me" />
        <p>Message is: {{ message }}</p>
        <div class="content">{{ message }}</div>
        <el-button type="primary" icon="zrx-icon iconsearch" 
        class="search-btn" @click="changeMessage()">修改message为新的内容</el-button>
    </div>
</template>
export default{
data(){
 return {
            message: 'hey',
            }
          }
        },
 methods:{ changeMessage() {
            this.message = 'newMessage'
        }
      }

实现效果如下：

点击按钮之后：

v-model在input为radio时的使用

<div>
            <label for="male"><input type="radio" id="male" value="男" v-model="sex" />
            男</label>
             <label for="female"><input type="radio" id="female" value="女" v-model="sex" />
             女</label>
            <h2>您选择的性别是{{ sex }}</h2>
        </div>

实现效果如下：

这里涉及到一个知识点，就是input与label标签一起使用时候的作用
参考链接
如果我们这里不使用label标签也是可以实现双向绑定的，但是我们只能点击小圆框才能点击选项，加上label标签之后，我们点击文字也可以实现选择选项实现双向绑定。
label标签中的for 是 关联控键中的Id，也就是input元素中的id
我们可以设置一个默认选项，在初始时候先选中一个选项，这个值对应的是input中的value值

export default{
data(){
 return {
            sex: '男',
            }
          }
        }

v-model在input为check-box时的使用

<div>
            <label v-for="item in fruits" for="item" :key="item"> <input type="checkbox" 
            :value="item" id="item" v-model="favoriteFruit" />{{ item }} </label>
            <h2>您喜欢的水果是：{{ favoriteFruit }}</h2>
        </div>
export default{
data(){
 return {
           fruits: ['banana', 'apple', 'orange', 'pitaya'],
            favoriteFruit: [],
            }
          }
        }

结果如下：

v-model在input为select时的使用
单选框：

     <div>
            <select name="single" id="single" v-model="sports">
                <option value="basketball">basketball</option>
                <option value="football">football</option>
                <option value="pingpong">pingpiong</option>
                <option value="badminton">badminton</option>
            </select>
        </div>

赋值一个默认值：

export default{
data(){
 return {
          sports: 'pingpong'
            }
          }
        }

效果如下：

可以实现双向绑定，更换选项时选择框跟随改变
多选框：

     <div>
     <select name="multiple" id="multiple" v-model="clothes" multiple>
                <option value="skirt">skirt</option>
                <option value="pants">pants</option>
                <option value="shoes">shoes</option>
                <option value="shirt">shirt</option>
            </select>
            <h2>您选择的衣服是{{ clothes }}</h2>
        </div>
    export default{
data(){
 return {
          clothes: [],
            }
          }
        }

实现效果如下(需要注意的是多选的时候要按住ctrl)：