流水武qin
流水武qin

Vue基础--Vue中的双向绑定v-model指令

一、v-model的作用和使用场景

1.1 v-model指令介绍

  • 期望的绑定值类型：根据表单输入元素或组件输出的值而变化

  • 可以下下面元素使用：

    表单输入元素都是可以使用的

  • v-model支持的修饰符：

    • .lazy——监听 change 事件而不是 input
    • .number ——将输入的合法符串转为数字
    • .trim—移除输入内容两端空格

1.2 v-model指令的作用

在表单输入元素或组件上创建双向绑定。

它会根据控件类型自动选取正确的方法来更新元素。

它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

毕竟表单提交是开发中非常常见的功能，也是和用户交互的重要手段。

用户在登录、注册时需要提交账号密码，检索、新建、更新数据时，需要提交数据，这些都离不开表单提交。

1.3 什么是双向绑定

Vue中的的双向数据绑定是指model模型（Vue中data下定义的变量）和view（视图）的双向绑定。

其中一个发生改变，另一个也会更新改变。

但是更通俗和常用的讲就是当表单元素的值发生变化时。和它绑定的Vue中的data变量也发生改变。，

二、v-model的基本使用

2.1 代码示例和解析

<div id="app">

    
    <input type="text" v-model="message">
 	<h2>input: {{message}}h2>
    <hr>
    
    
    <textarea cols="30" rows="10" v-model="content">textarea>
    <h2>textarea: {{content}}h2>
    <hr>
    
    
    
    
    <label for="agree">
        <input id="agree" type="checkbox" v-model="isAgree"> 同意协议
    label>
    <h2>checkbox单选: {{isAgree}}h2>
    <hr>
    
    
    
    <div class="hobbies">
        <h2>请选择你的爱好:h2>
        <label for="sing">
            <input id="sing" type="checkbox" v-model="hobbies" value="sing"> 唱
        label>
        <label for="jump">
            <input id="jump" type="checkbox" v-model="hobbies" value="jump"> 跳
        label>
        <h2>爱好: {{hobbies}}h2>
    div>
    <hr>
    
    
    
    
    <div class="gender">
        <label for="male">
            <input id="male" type="radio" v-model="gender" value="male"> 男
        label>
        <label for="female">
            <input id="female" type="radio" v-model="gender" value="female"> 女
        label>
        <h2>性别: {{gender}}h2>
    div>
    <hr>
    
    
    
 	
    <select v-model="fruit">
        <option v-for="item in allFruits" :key="item.value" :value="item.value">
            {{item.text}}
        option>
    select>
    <h2>单选: {{fruit}}h2>
	
    <select multiple size="3" v-model="fruits">
        <option v-for="item in allFruits" :key="item.value" :value="item.value">
            {{item.text}}
        option>
    select>
    <h2>多选: {{fruits}}h2>
    <hr>
div>

<script src="../lib/vue.js">script>
<script>
    // 1.创建app
    const app = Vue.createApp({
        data() {
            return {
                message: "Hello Model",		//v-model绑定的input数据
                content: "",				//v-model绑定的textarea数据
                isAgree: false,				//v-model绑定的checkbox单选框数据 
                hobbies: []					//v-model绑定的checkbox多选框数据
                gender: "female"			//v-model绑定的radio单选框数据
                fruit: "orange",			//v-model绑定的select单选框数据
                fruits: [],					//v-model绑定的select多选框数据
                             
                allFruits: [
                    { value: "apple", text: "苹果" },
                    { value: "orange", text: "橘子" },
                    { value: "banana", text: "香蕉" },
                ],						 	// 水果
            }
        }
    })

    // 2.挂载app
    app.mount("#app")
script>

可以看到，使用v-model的方式非常简单：

  • 在支持v-model的表单输入元素上加上v-model指令
  • 在Vue的data选项API中定义数据变量，赋值给v-model就实现了数据的双向绑定

这些也都是对基础的表单元素进行操作。实际开发大多会使用各种各样的组件库开发。

但是使用的方式和原理都是一样的。

2.2 v-model和值绑定：

所谓值绑定，其实并不是很高深的东西，只是Vue官方提供的一个概念。

意思就是表单元素中的value值并不是写死的，而是来自于服务器或者配置文件。

我们就可以先将值请求下来，绑定到data返回的对象中，

再使用条件渲染指令和列表渲染指令把值动态绑定到表单元素上，最后通过v-bind指令来进行绑定。

这个过程就是值绑定。

例如上面代码中select的绑定方式：

<div id="app"> 
 	
    <select v-model="fruit">
        <option v-for="item in allFruits" :key="item.value" :value="item.value">
            {{item.text}}
        option>
    select>
    <h2>单选: {{fruit}}h2>

div>

<script src="../lib/vue.js">script>
<script>
    // 1.创建app
    const app = Vue.createApp({
        data() {
            return {
                fruit: "orange",			//v-model绑定的select单选框数据      
                allFruits: [
                    { value: "apple", text: "苹果" },
                    { value: "orange", text: "橘子" },
                    { value: "banana", text: "香蕉" },
                ],						 	// 水果
            }
        }
    })

    // 2.挂载app
    app.mount("#app")
script>

在这段代码中，