欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于Vue表单--v-model的使用

程序员文章站 2022-06-28 13:31:58
前言:这次笔记的主要内容为:v-model的具体使用方法。一、表单绑定v-modelVue中使用v-model指令来实现表单元素和数据的双向绑定。(1)双向绑定的原理我们在输入框中输入内容input中的v-model绑定了message,所以会实时将输入的内容传给message,message发生改变message发生改变时,因为我们使用了Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变故通过v-model实现了双向绑定

前言:这次笔记的主要内容为:v-model的具体使用方法。

一、表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

(1)双向绑定的原理

  • 我们在输入框中输入内容
  • input中的v-model绑定了message,所以会实时将输入的内容传给message,message发生改变
  • message发生改变时,因为我们使用了Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变
  • 故通过v-model实现了双向绑定
<div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
    
    <!--   也可以使用绑定textarea元素来实现双向绑定   -->
    <textarea v-model="message"></textarea>
    <p>输入的内容是:{{message}}</p>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            message:''
        }
    })
</script>

(2)v-model结合radio类型使用

这个例子可以实现多个复选框里只选择一个(多选一)

<div id = "app">
    <!--使用label点击文字也可以实现功能-->
    <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>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            message:"你好啊",
            sex:"男"
        }
    })
</script>

(3)v-model结合checkbox类型使用

checkbox单选框:

  • 对应的v-model绑定的是一个布尔值
  • 此时input的value不影响v-model的值

checkbox多选框:

  • 对应的v-model绑定的是一个数组(data属性中)
  • 当选中某一个时,就会将input的value添加到数组中
<div id = "app">
    <!-- 单选框-->
    <label for = "one">
        <input type="checkbox" id="one" v-model= "isone">点我同意下一步
    </label>
    <button :disabled= "!isone" >下一步</button>
    
    <!-- 多选框 -->
    <input type="checkbox" value="苹果" v-model="fruit">苹果
    <input type="checkbox" value="石榴" v-model="fruit">石榴
    <input type="checkbox" value="西瓜" v-model="fruit">西瓜
    <input type="checkbox" value="香蕉" v-model="fruit">香蕉
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好",
            isone:false,  //布尔值
            fruit:[]  //绑定数组
        }
    })
</script>

(4)v-model结合select类型使用

单选:只能选中一个值

  • v-model绑定的是一个值(在select里绑定)
  • 当选中option中的一个时,会将它对应的value赋值到sister

多选:可以选中多个值

  • v-model绑定的是一个数组
  • 当选中多个值时,就会将选中的option对应的value添加到数组sisters
<div id = "app">
    <!-- 选择一个-->
    <select name="abc" v-model="sister">
        <option value = "小花">小花</option>
        <option value = "大喜">大喜</option>
        <option value = "佳哥">佳哥</option>
        <option value = "静姐">静姐</option>
    </select>
    
    <!-- 选择多个时要在section里多加一个 multiple -->
    <select name="abc" v-model="sisters"  multiple>
        <option value = "小花">小花</option>
        <option value = "大喜">大喜</option>
        <option value = "佳哥">佳哥</option>
        <option value = "静姐">静姐</option>
    </select>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            sister:'大喜',
            sisters:[]
        }
    })
</script>

二、值绑定

其实就是不把value的值写死,用一个定义在data里的数组或者是网络中获取的值来循环value。总的来说就是:动态的给value赋值

 <input type="checkbox" value="苹果" v-model="fruit">苹果
 <input type="checkbox" value="石榴" v-model="fruit">石榴
 <input type="checkbox" value="西瓜" v-model="fruit">西瓜
 <input type="checkbox" value="香蕉" v-model="fruit">香蕉

<!--用值绑定就如下所示-->
<label v-for="item in fruitss" v-bind:for="item">
    <input type="checkbox" v-bind:value="item" :id="item" v-model="fruitss">{{item}}
</label>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            fruitss:["苹果","西瓜","石榴","香蕉","樱桃","橙子"]
        }
    })
</script>

三、v-model修饰符的使用

(1)lazy修饰符

  • 默认情况下,v-model默认是在input事件中同步输入框的数据

  • 就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变

  • lazy修饰符可以让数据在失去焦点或者回车时才会更新(不会实时更新)

    <input type="text" v-model.lazy="message">
    

(2)number修饰符

  • 默认情况下,在输入框中无论输入数字还是字母,v-model都会把他们当做字符串类型来处理

  • number修饰符可以让在输入框中输入的内容自动转化成数字类型

    <input type="text" v-model.number="age">
    

(3)trim修饰符

  • 如果输入的内容首尾有很多空格(在页面中是看不到的,但在控制台可以看到),我们都想将他除去

  • 使用trim修饰符可以过滤内容左右两边的空格

    <input type="text" v-model.trim="message">
    

本文地址:https://blog.csdn.net/weixin_48931875/article/details/107542908

相关标签: 前端 vue.js