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

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

早睡早起长头发

4488人浏览 · 2022-08-04 20:17:02

早睡早起长头发 · 2022-08-04 20:17:02 发布

双向绑定使用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>

GitHub 加速计划 / vu / vue

108

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：2 个月前 )

9e887079 [skip ci] 1 年前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐