双向绑定

现在要实现一个双向绑定，双向绑定的意思就是，当修改输入栏中的内容时，可以在其他地方同时更新操作，如实时显示input内容。

新建:

<!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">
    <script src="js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form action="">
            <input type="text" :value="val" @input="myIpt">
            <h1>{{val}}</h1>
        </form>
    </div>
</body>
</html>

<script>
    new Vue({
        el:"#app",
        data:{
            val:"123"
        },
        methods: {
            myIpt(e){
                console.log(e.target.value); 
            }
    },
    })
</script>
  • 第13行：使用@input 来绑定myIpt 方法用来捕捉输入的内容
  • 第28行：调用target属性下的value值，可以直接捕捉到input的全部内容

测试页面：image.png
可以看到每一次输入值，就可以在控制台打印input中的内容。

所以为了实现内容框和input栏同步，可以调用target.value值来更新内容框：

<!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">
    <script src="js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form action="">
            <input type="text" :value="val" @input="myIpt">
            <h1>{{val}}</h1>
        </form>
    </div>
</body>
</html>

<script>
    new Vue({
        el:"#app",
        data:{
            val:"123"
        },
        methods: {
            myIpt(e){
                this.val = e.target.value
            }
    },
    })
</script>
  • 第28行：将val与target.value的值进行绑定，就能实现实时更新。

image.png

补充

@input

改变Input内容就执行对应的事件

@clickon

当点击一次按钮就执行对应的事件

v-model

官方文档：https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
可以对一个标签如form 直接双向绑定。

与input搭配使用

使用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=device-width, initial-scale=1.0">
    <script src="js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <h1>{{val}}</h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            val:""
        }
    })
</script>
  • 第12行对text标签进行v-model="val" 绑定。

v-model="val" 绑定了data中的val值，当text内容改变时，v-model绑定的值也会改变。

v-model不光可以作用在input上，也可以作用在多行文本，复选框等等，用法都是一样的。

与复选框搭配使用

当点击一个勾选框，就可以改变下方的状态。

    <!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">
        <script src="js/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="val">
            <h1>{{val}}</h1>
            <hr>
            <textarea v-model="text"></textarea>
            <h1>{{text}}</h1>
            <hr>
            <input type="checkbox" v-model="checked">是否同意
            <h1>{{checked}}</h1>
        </div>
    </body>
    </html>
    <script>
        new Vue({
            el:"#app",
            data:{
                val: "",
                text: "",
                checked:false,
            }
        })
    </script>
  • 18、19行添加了多复选框标签

测试页面：
image.png
点击选项框

image.png
可以看到下方的布尔值会发生改变。

补充：复选框绑定文字

上方的代码只有点击选项框才会改变状态，现在实现点击选项框旁边的文字也要改变选项框状态，方法如下：

  1. 使用label 标签绑定id选择器：

     <!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">
     <script src="js/vue.js"></script>
     <title>Document</title>
 </head>
 <body>
     <div id="app">
         <input type="text" v-model="val">
         <h1>{{val}}</h1>
         <hr>
         <textarea v-model="text"></textarea>
         <h1>{{text}}</h1>
         <hr>
         <input type="checkbox" v-model="checked" id="myChecked">
         <label for="myChecked">是否同意</label>
         <h1>{{checked}}</h1>
     </div>
 </body>
 </html>
 <script>
     new Vue({
         el:"#app",
         data:{
             val: "",
             text: "",
             checked:false,
         }
     })
 </script>

  2. 直接使用label 标签包裹：

     <!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">
     <script src="js/vue.js"></script>
     <title>Document</title>
 </head>
 <body>
     <div id="app">
         <input type="text" v-model="val">
         <h1>{{val}}</h1>
         <hr>
         <textarea v-model="text"></textarea>
         <h1>{{text}}</h1>
         <hr>
         <label>
         <input type="checkbox" v-model="checked" >
         是否同意</label>
         <!-- <input type="checkbox" v-model="checked" id="myChecked">
         <label for="myChecked">是否同意</label> -->
         <h1>{{checked}}</h1>
     </div>
 </body>
 </html>
 <script>
     new Vue({
         el:"#app",
         data:{
             val: "",
             text: "",
             checked:false,
         }
     })
 </script>

    测试页面：
    image.png
    点击文字
    image.png

    点击同意选项才显示下一步按钮

     <!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">
     <script src="js/vue.js"></script>
     <title>Document</title>
 </head>
 <body>
     <div id="app">
         <input type="text" v-model="val">
         <h1>{{val}}</h1>
         <hr>
         <textarea v-model="text"></textarea>
         <h1>{{text}}</h1>
         <hr>
         <label>
         <input type="checkbox" v-model="checked" >
         是否同意</label>
         <!-- <input type="checkbox" v-model="checked" id="myChecked">
         <label for="myChecked">是否同意</label> -->
         <h1>{{checked}}</h1>
         <div v-show="checked" style="width:120px;
         height:30px;background:pink;
         text-align:center;
         line-height: 30px;
         color:#fff;">下一步</div>
     </div>
 </body>
 </html>
 <script>
     new Vue({
         el:"#app",
         data:{
             val: "",
             text: "",
             checked:false,
         }
     })
 </script>
  • 24-28行添加了下一步按钮，使用v-show 绑定复选框就能通过是否勾选来控制是否显示下一步按钮。

image.png
点击复选框
image.png
可以看到显示下一步按钮。

捕获复选框选中内容

复选框的选中结果通过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=device-width, initial-scale=1.0">
        <script src="js/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="val">
            <h1>{{val}}</h1>
            <hr>
            <textarea v-model="text"></textarea>
            <h1>{{text}}</h1>
            <hr>
            <label>
            <input type="checkbox" v-model="checked" >
            是否同意</label>
            <!-- <input type="checkbox" v-model="checked" id="myChecked">
            <label for="myChecked">是否同意</label> -->
            <h1>{{checked}}</h1>
            <div v-show="checked" style="width:120px;
            height:30px;background:pink;
            text-align:center;
            line-height: 30px;
            color:#fff;">下一步</div>
            <hr>
            爱好：
            <label><input type="checkbox" value="smoke" v-model="checkArr">吸烟</label>    
            <label><input type="checkbox" value="drink" v-model="checkArr">喝酒</label>
            <label><input type="checkbox" value="hair" v-model="checkArr">烫头</label>
            <label><input type="checkbox" value="rap" v-model="checkArr">RAP</label>
            <h1>{{checkArr}}</h1>
        </div>
    </body>
    </html>
    <script>
        new Vue({
            el:"#app",
            data:{
                val: "",
                text: "",
                checked:false,
                checkArr:[]
            }
        })
    </script>
  • 第46行声明一个新的数组checkArr
  • 30-35行添加多个爱好，并且使用v-model绑定checkArr，这样

image.png
还可以添加默认值，当第一次加载选项框的时候，会默认勾选，想要实现默认勾选功能，只需要在上方代码块中的第46行的数组checkArr中添加复选框元素的value值即可。

与选择框搭配使用

这里的选择框指的下拉单选框。
代码如下:

    <!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">
        <script src="js/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="val">
            <h1>{{val}}</h1>
            <hr>
            <textarea v-model="text"></textarea>
            <h1>{{text}}</h1>
            <hr>
            <label>
            <input type="checkbox" v-model="checked" >
            是否同意</label>
            <!-- <input type="checkbox" v-model="checked" id="myChecked">
            <label for="myChecked">是否同意</label> -->
            <h1>{{checked}}</h1>
            <div v-show="checked" style="width:120px;
            height:30px;background:pink;
            text-align:center;
            line-height: 30px;
            color:#fff;">下一步</div>
            <hr>
            爱好：
            <label><input type="checkbox" value="smoke" v-model="checkArr">吸烟</label>    
            <label><input type="checkbox" value="drink" v-model="checkArr">喝酒</label>
            <label><input type="checkbox" value="hair" v-model="checkArr">烫头</label>
            <label><input type="checkbox" value="rap" v-model="checkArr">RAP</label>
            <h1>{{checkArr}}</h1>
            <hr>

            <select v-model="selected">
                <option value="gaozhong">高中</option>
                <option value="zhuanke">专科</option>
                <option value="benke">本科</option>
                <option value="boshi">博士</option>
            </select>
            <h1>{{selected}}</h1>
        </div>
    </body>
    </html>
    <script>
        new Vue({
            el:"#app",
            data:{
                val: "",
                text: "",
                checked:false,
                checkArr:["smoke"],  // 添加默认值
                selected:""
            }
        })
    </script>
  • 38-44行使用选择框，设置了五个选项
  • 56行在data中新创建了一个字符串变量

测试页面：
image.png
点击选项之后，对应的值成功在页面展示。

修饰符

是v-model的一个附加操作，在input事件触发之后(需要使用@input)将输入框内的值进行一个附加操作。
可以对用户输入的值进行一个处理，如：自动过滤用户输入的值的前后的空格、将字符串类型转换成number类型。

.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=device-width, initial-scale=1.0">
        <script src="js/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="val">
            <h1>{{val}}</h1>
            <hr>
            <textarea v-model="text"></textarea>
            <h1>{{text}}</h1>
            <hr>
            <label>
            <input type="checkbox" v-model="checked" >
            是否同意</label>
            <!-- <input type="checkbox" v-model="checked" id="myChecked">
            <label for="myChecked">是否同意</label> -->
            <h1>{{checked}}</h1>
            <div v-show="checked" style="width:120px;
            height:30px;background:pink;
            text-align:center;
            line-height: 30px;
            color:#fff;">下一步</div>
            <hr>
            爱好：
            <label><input type="checkbox" value="smoke" v-model="checkArr">吸烟</label>    
            <label><input type="checkbox" value="drink" v-model="checkArr">喝酒</label>
            <label><input type="checkbox" value="hair" v-model="checkArr">烫头</label>
            <label><input type="checkbox" value="rap" v-model="checkArr">RAP</label>
            <h1>{{checkArr}}</h1>
            <hr>
            <select v-model="selected">
                <option value="gaozhong">高中</option>
                <option value="zhuanke">专科</option>
                <option value="benke">本科</option>
                <option value="boshi">博士</option>
            </select>
            <h1>{{selected}}</h1>
            <hr>
            <input type="text" v-model.trim="name" @input="myInput">
            <h1>{{name}}</h1>
        </div>




    </body>
    </html>
    <script>
        new Vue({
            el:"#app",
            data:{
                val: "",
                text: "",
                checked:false,
                checkArr:["smoke"],  // 添加默认值
                selected:"",
                name:""
            },

            methods:{
                myInput(){                
                    console.log(this.name);
                }
            }
        })
    </script>
  • 第45行代码，使用v-model.trim 修饰符，同时绑定input事件
  • 第68行myInput事件打印输入内容

测试代码：
image.png
可以看到自动去除了前后的空格。

最后修改：2024 年 03 月 13 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏