前端学习-Vue-part3（双向数据绑定模块v-model，复选框、单选框、下拉框）

本文链接：https://blog.youkuaiyun.com/yxnd150150/article/details/105473830

其实就是各种特性各种学，主要看的是小马哥的视频，官方文档也看了，奈何容易忘记，老话说，好记性不如烂键盘，边学自己边敲代码，回头再整到博客上，加深记忆。

Vue表单空间绑定 v-model

v-model将输入的内容和变量快速绑定到一起（双向绑定），Vue.js会侦测到绑定数据的变量，当用户改变输入时，将数据回传给js的变量，看一个例子：
在这里插入图片描述

<body>
    <div id="myApp">
        <p>正文</p>
        <input type="text" v-model="message" placeholder="待编辑区域" />
        <p>{{message}}</p>
    </div>

    <script>
        var myApp = new Vue({
            el:"#myApp",
            data:{
                message:"文本1",
            },

        })
    </script>
</body>

分析一下：

placeholder是输入框默认显示的值，若一开始message已存在，则覆盖。
使用v-model，通过变量message与用户的输入实现双向绑定，当用户改变输入文本框的值时，显示的内容也跟着改变。

Vue中的复选框

复选框在html是checkbox,这里单独拎出来记录一下是因为示例代码中使用了v-model中一个列表变量绑定多个复选框，这样就能动态获取用户勾选的结果，来看看代码：

<body>
    <div id="myApp">
        <input type="checkbox" id="选项一" value="选项一" v-model="checkBoxes">
        <label for="选项一">选项一</label>
        <input type="checkbox" id="选项二" value="选项二" v-model="checkBoxes">
        <label for="选项二">选项二</label>
        <input type="checkbox" id="选项三" value="选项三" v-model="checkBoxes">
        <label for="选项三">选项三</label>
        <p>选中的选项： {{checkBoxes}}</p>
    </div>

    <script>
        var myApp = new Vue({
            el:"#myApp",
            data: {
                checkBoxes:[]
            },
            methods:{}
        })
    </script>
</body>

分析一下：

都怪自己没学好html。。。<label for:"id_name">是用来绑定指定id表单数据的内容的，这是一个小知识点。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。再直白点：你点那个label的内容，勾勾就会自动打上。
变量checkBoxes的值会随着用户勾勾的选择而改变，使之改变的方法是把三个<p>标签的都使用v-model绑定到checkBoxes
放进checkBoxes的值是<p>标签中的value属性的内容。

表单中的单选按钮

html中单选框的标签为<input type="radio">，照例使用v-model来绑定选项内容。注意到在单选问题中，不同选项是互斥的，可以在<input>中设置相同的name解决这个问题，让我们来康康，借助Vue的神奇力量来解决这个小问题，看个例子：

<body>
    <div id="myApp">
        <p>性别</p>
        <input type="radio" id="male" value="男" v-model="chooseSex">
        <label for="male">男</label>
        <input type="radio" id="female" value="女" v-model="chooseSex">
        <label for="female">女</label>

        <p>职业</p>
        <input type="radio" id="白领" value="白领" v-model="chooseJob">
        <label for="白领">白领</label>
        
        <input type="radio" id="司机" value="司机" v-model="chooseJob">
        <label for="司机">司机</label>

        <p>性别：{{chooseSex}}</p>
        <p>职业：{{chooseJob}}</p>
    </div>

    <script>
        var myApp = new Vue({
            el:"#myApp",
            data:{
                chooseSex:'',
                chooseJob:''
            },
            methods:{}
        })
    </script>
</body>

分析一下：

（还是注意label的用法。。）
可以看到我们使用了相同的变量名去绑定同一个选择题里面的选项，使用的是v-model，从打印结果看，用户选择的数据会实时地同步到变量中，实现的”单选“的逻辑功能。

表单下拉框

老生常谈，也是通过v-model实现的，注意html的标签是<select>,多选时使用multiple关键字，让我们看看代码中如何实现单选、多选下拉和变量的绑定：（边学html边学Vue.js的节奏。。。）
在这里插入图片描述

<body>
    <div id="myApp">
    <最擅长的科目:>
    <select v-model="bestCourse">
        <option>语文</option>
        <option>数学</option>
        <option>英语</option>
        <option>地理</option>
        <option>生物</option>
    </select>

    <p>觉得还可以的科目</p>
    <select multiple v-model="goodCourses">
        <option>语文</option>
        <option>数学</option>
        <option>英语</option>
        <option>地理</option>
        <option>生物</option>
    </select>

    <p>选择结果：</p>
    <p>{{bestCourse}}</p>
    <p>{{goodCourses}}</p>    

    </div>
    <script>
        var myAPp = new Vue({
            el:"#myApp",
            data:{
                bestCourse:null,
                goodCourses:[]
            }
        })
    </script>
</body>