Vue3学习笔记（9.3）

mez_Blog

已于 2023-04-04 19:19:39 修改

阅读量1.2k

点赞数 1

分类专栏：前端 HTML5 Vue3 文章标签：学习前端 javascript vue.js html5

于 2023-04-04 16:54:50 首次发布

本文链接：https://blog.csdn.net/mez_Blog/article/details/129945972

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

Vue3表单

我们可以用v-model指令在表单<input>、<textarea>及<select>等元素上创建双向数据绑定。

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

v-model会忽略所有表单的value、checked、selected属性的初始值，使用的是data选项中声明的初始值。

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text和textarea元素使用value属性和input事件；

checkbox和radio使用checked属性和change事件；

select字段将value作为属性并将change作为事件。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-04 09:02:04
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 10:12:10
 * @FilePath: \vscode\v-on.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <button @click="say('不嗨')">Say hi</button> -->
        <!-- <button @click="one($event),two($event)">Say ji</button> -->
        <p>input输入的内容：</p>
        <input type="text" v-model="message" placeholder="请输入内容：">
        <p>文本框输入的内容为：{{message}}</p>

        <p>文本域输入的内容：</p>
        <textarea name="" id="" cols="30" rows="10" v-model="message2" placeholder="文本域输入内容："></textarea>
        <p>文本域输入的内容是：</p>
        <p style="white-space: pre;">{{message2}}</p>
    </div>

    <script>
        const app={
            data(){
                return{
                    // name:'mez'
                    message:"",
                    message2:"两年半练习生\n唱跳rap篮球"
                }
            }
            // methods:{
            //     one(event){
            //         alert("第一个弹窗")

                    // if (event){
                    //     alert(event.target.tagName)
                    // }
            //     },
            //     two(event){
            //         alert("第二个弹窗")

            //         // if (event){
            //         //     alert(event.target.tagName)
            //         // }
            //     }
            // }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

在文本域textarea的插值是不起作用的，需要用v-model来代替：

<!-- 不起作用 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框

复选框如果是一个未逻辑值，如果是多个则绑定到同一个数组：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-04 09:02:04
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 10:27:13
 * @FilePath: \vscode\v-on.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <button @click="say('不嗨')">Say hi</button> -->
        <!-- <button @click="one($event),two($event)">Say ji</button> -->
        <p>单个复选框：</p>
        <input type="checkbox"  id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>

        <p>多个复选框：</p>
        <input type="checkbox"  id="mul_box1" v-model="checkedNames" value="Shanghai">
        <label for="mul_box1">Shanghai</label>
        <input type="checkbox"  id="mul_box2" v-model="checkedNames" value="Beijing">
        <label for="mul_box2">Beijing</label>
        <input type="checkbox"  id="mul_box3" v-model="checkedNames" value="Tianjin">
        <label for="mul_box3">Tianjin</label>
        <div>
            <span>你选择的值为：{{checkedNames}}</span>
        </div>
    </div>

    <script>
        const app={
            data(){
                return{
                    // name:'mez'
                    // message:"",
                    // message2:"两年半练习生\n唱跳rap篮球"
                    checked:false,
                    checkedNames:["mez"]
                }
            }
            // methods:{
            //     one(event){
            //         alert("第一个弹窗")

                    // if (event){
                    //     alert(event.target.tagName)
                    // }
            //     },
            //     two(event){
            //         alert("第二个弹窗")

            //         // if (event){
            //         //     alert(event.target.tagName)
            //         // }
            //     }
            // }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

单选按钮

以下实例中演示了单选按钮的双向数据绑定：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-04 09:02:04
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 10:34:41
 * @FilePath: \vscode\v-on.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <button @click="say('不嗨')">Say hi</button> -->
        <!-- <button @click="one($event),two($event)">Say ji</button> -->
        <p>单个复选框：</p>
        <input type="radio"  id="Shanghai" value="Shanghai" v-model="picked">
        <label for="Shanghai">Shanghai</label>
        <div></div>
        <input type="radio"  id="Beijing" value="Beijing" v-model="picked">
        <label for="Beijing">Beijing</label>
        
        <div>
            <span>你选择的值为：{{picked}}</span>
        </div>
    </div>

    <script>
        const app={
            data(){
                return{
                    // name:'mez'
                    // message:"",
                    // message2:"两年半练习生\n唱跳rap篮球"
                    // checked:false,
                    // checkedNames:["mez"]
                    picked:'Beijing'
                }
            }
            // methods:{
            //     one(event){
            //         alert("第一个弹窗")

                    // if (event){
                    //     alert(event.target.tagName)
                    // }
            //     },
            //     two(event){
            //         alert("第二个弹窗")

            //         // if (event){
            //         //     alert(event.target.tagName)
            //         // }
            //     }
            // }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

select列表

以下实例演示了下拉列表的双向数据绑定：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-04 09:02:04
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 16:23:11
 * @FilePath: \vscode\v-on.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <select name="" id="" v-model="selected" name="site">
            <option value="">选择一个网站</option>
            <option value="www.baidu.com">百度</option>
            <option value="www.google.com">谷歌</option>
        </select>
        <div id="output">
            选择的网站是：{{selected}}
        </div>
    </div>

    <script>
        const app={
            data(){
                return{
                    // name:'mez'
                    // message:"",
                    // message2:"两年半练习生\n唱跳rap篮球"
                    // checked:false,
                    // checkedNames:["mez"]
                    // picked:'Beijing'
                    selected:'无'
                }
            }
            // methods:{
            //     one(event){
            //         alert("第一个弹窗")

                    // if (event){
                    //     alert(event.target.tagName)
                    // }
            //     },
            //     two(event){
            //         alert("第二个弹窗")

            //         // if (event){
            //         //     alert(event.target.tagName)
            //         // }
            //     }
            // }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

多选时会绑定到一个数组：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-04 09:02:04
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 16:27:56
 * @FilePath: \vscode\v-on.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <select name="" id="" v-model="selected" name="site" multiple>
            <option value="">选择一个网站</option>
            <option value="www.baidu.com">百度</option>
            <option value="www.google.com">谷歌</option>
            <option value="www.kunkun.com">坤坤</option>
            <option value="www.basketball.com">篮球</option>
        </select>
        <div id="output">
            选择的网站是：{{selected}}
        </div>
    </div>

    <script>
        const app={
            data(){
                return{
                    // name:'mez'
                    // message:"",
                    // message2:"两年半练习生\n唱跳rap篮球"
                    // checked:false,
                    // checkedNames:["mez"]
                    // picked:'Beijing'
                    selected:'无'
                }
            }
            // methods:{
            //     one(event){
            //         alert("第一个弹窗")

                    // if (event){
                    //     alert(event.target.tagName)
                    // }
            //     },
            //     two(event){
            //         alert("第二个弹窗")

            //         // if (event){
            //         //     alert(event.target.tagName)
            //         // }
            //     }
            // }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

记得在多选时按住Ctrl键，要不然还是单选

使用v-for循环输出选项：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-04 09:02:04
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 16:36:49
 * @FilePath: \vscode\v-on.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <select name="" id="" v-model="selected" name="site" >
            <option :value="option.value" v-for="option in options">
                {{option.title}}
            </option>
            <!-- <option value="www.baidu.com">百度</option>
            <option value="www.google.com">谷歌</option>
            <option value="www.kunkun.com">坤坤</option>
            <option value="www.basketball.com">篮球</option> -->
        </select>
        <div id="output">
            选择的网站是：{{selected}}
        </div>
    </div>

    <script>
        const app={
            data(){
                return{
                    // name:'mez'
                    // message:"",
                    // message2:"两年半练习生\n唱跳rap篮球"
                    // checked:false,
                    // checkedNames:["mez"]
                    // picked:'Beijing'
                    selected:'www.kunkun.com',
                    options:[
                        {title:'kunkun',value:'www.kunkun.com'},
                        {title:'baidu',value:'www.baidu.com'},
                        {title:'guge',value:'www.google.com'},
                    ]
                }
            }
            // methods:{
            //     one(event){
            //         alert("第一个弹窗")

                    // if (event){
                    //     alert(event.target.tagName)
                    // }
            //     },
            //     two(event){
            //         alert("第二个弹窗")

            //         // if (event){
            //         //     alert(event.target.tagName)
            //         // }
            //     }
            // }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

值绑定

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能向把值绑定到当前活动实例的一个动态属性上，这时可以用v-bind实现，此外，使用v-bind可以将输入值绑定到非字符串。

复选框（CheckBox）：

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
...
// 选中时
vm.toggle === 'yes'
// 取消选中 
vm.toggle === 'no'

单选框（Radio）

<input type="radio" v-model="pick" v-bind:value="a" />
// 当选中时
vm.pick === vm.a

选择框选项（Select）

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

在默认情况下，v-model在input事件中同步输入框的值和数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果将自动将用户的输入值转变为Number类型（如果原值的转换结果为NAN则返回原值），可以添加一个修饰符number给v-model来处理输入值：

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

这通常很有用，因为在type=“number”时HTML中输入的值也总是返回字符串类型。

.trim

如果向自动过滤用户输入的首尾空白字符，可以添加trim修饰符到v-model上过滤输入：

<input v-model.trim="msg">

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3学习笔记（9.3）

但是有时我们可能向把值绑定到当前活动实例的一个动态属性上，这时可以用v-bind实现，此外，使用v-bind可以将输入值绑定到非字符串。v-model会忽略所有表单的value、checked、selected属性的初始值，使用的是data选项中声明的初始值。我们可以用v-model指令在表单、及等元素上创建双向数据绑定。这通常很有用，因为在type=“number”时HTML中输入的值也总是返回字符串类型。记得在多选时按住Ctrl键，要不然还是单选。
复制链接

扫一扫