【Vue3】表单数据的双向绑定：v-model

早睡早起长头发

已于 2023-01-04 19:30:43 修改

阅读量4.1k

点赞数 2

分类专栏： Vue 文章标签： servlet java jvm

于 2022-08-04 20:17:02 首次发布

本文链接：https://blog.csdn.net/weixin_51481135/article/details/126165887

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

双向绑定使用v-model="绑定的变量名"

当在视图中改变了文本框的值，模型会把输入的值赋给变量；当模型中的变量值发生改变，视图中会用插值表达式取出模型的值。

一、单行文本框的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
       <input type="text" v-model="signleText">
       <br><br>
       <p>文本框输入的内容是：{{ signleText }}</p>
    </div>
    <script>
        const obj = {
            data(){
                return{
                    signleText:''
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

输入内容前：

输入内容后：

二、多行文本区的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
       <!-- 默认10行30列 -->
       <textarea rows="10" cols="30" v-model="textarea"></textarea>
       <br><br>
       <p>文本区输入的内容是：{{ textarea }}</p>

    </div>
    <script>
        const obj = {
            data(){
                return{
                    textarea:''
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

输入内容前：

输入内容后：

三、复选框的绑定

多个复选框绑定的变量名(下例中的name)要相同,并且是数组类型的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    <input type="checkbox" v-model="checkbox" value="足球" name="hobby">足球
    <input type="checkbox" v-model="checkbox" value="蓝球" name="hobby">蓝球
    <input type="checkbox" v-model="checkbox" value="排球" name="hobby">排球
   <br><br>
   <p>你的选择是：{{ checkbox }}</p>
    </div>

    <script>
        const obj = {
            data(){
                return{
                    checkbox:[] //一次选多个值
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

选定前：

选定后：

四、单选按钮的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
   <input type="radio" v-model="radio" value="男">男
   <input type="radio" v-model="radio" value="女">女
   <br><br>
   <p>你的选择的性别是：{{ radio }}</p>
    </div>
    <script>
        const obj = {
            data(){
                return{
                    radio:'' //一次选一个值
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

选定前：

选定后：

五、下拉列表框的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
   <!-- 默认一次只能选择一个选项 -->
   <select v-model="select">
    <option value="A">AAAAA</option>
    <option value="B">BBBBB</option>
    <option value="C">CCCCC</option>
    <option value="D">DDDDD</option>
   </select>
   <br><br>
   <p>你的选择是：{{ select }}</p>
    </div>
    <script>
        const obj = {
            data(){
                return{
                    select:''
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

选择前：

选择后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
   <!-- multiple：可以多选，默认为数组 -->
   <select v-model="select" multiple>
    <option value="A">AAAAA</option>
    <option value="B">BBBBB</option>
    <option value="C">CCCCC</option>
    <option value="D">DDDDD</option>
   </select>
   <br><br>
   <p>你的选择是：{{ select }}</p>
    </div>
    <script>
        const obj = {
            data(){
                return{
                    select:‘’
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

选择前：

选择后：

六、常用的两个修饰符

1.lazy

懒加载。当输入框失去焦点时再将输入框和变量进行绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
       <!-- v-model.lazy：懒加载 -->
       <input type="text" v-model.lazy="signleText">
       <br><br>
       <p>文本框输入的内容是：{{ signleText }}</p>
    </div>
    <script>
        const obj = {
            data(){
                return{
                    signleText:''
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

2.trim

去掉绑定的文本数据前后的空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
       <!-- v-model.trim:去掉绑定的文本数据前后的空格 -->
       <textarea rows="10" cols="30" v-model.trim="textarea"></textarea>
       <br><br>
       <p>文本区输入的内容是：{{ textarea }}</p>

    </div>
    <script>
        const obj = {
            data(){
                return{
                    textarea:''
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>