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

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

Vue表单空间绑定 v-model

v-model将输入的内容和变量快速绑定到一起(双向绑定),Vue.js会侦测到绑定数据的变量,当用户改变输入时,将数据回传给js的变量,看一个例子:
前端学习-Vue-part3(双向数据绑定模块v-model,复选框、单选框、下拉框)_第1张图片

<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。。。是用来绑定指定id表单数据的内容的,这是一个小知识点。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。再直白点:你点那个label的内容,勾勾就会自动打上。
  • 变量checkBoxes的值会随着用户勾勾的选择而改变,使之改变的方法是把三个

    标签的都使用v-model绑定到checkBoxes

  • 放进checkBoxes的值是

    标签中的value属性的内容。

表单中的单选按钮

html中单选框的标签为,照例使用v-model来绑定选项内容。注意到在单选问题中,不同选项是互斥的,可以在中设置相同的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的标签是来指定下拉多选,其他好像也都和之前的radio和checkbox一样,又复习了一下v-model的使用233。

你可能感兴趣的:(Vue,vue)