（VueJs）v-model双向绑定

最新推荐文章于 2024-09-05 20:32:41 发布

黑胡子大叔的小屋

最新推荐文章于 2024-09-05 20:32:41 发布

阅读量228

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104740163

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <input v-model="message" type="text">
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好'
        }
    })
</script>
</body>
</html>

在这里插入图片描述
当改变文本框中的内容时，h2标签中的相应改变

当从控制台修改data中的message数据时，文本框中相应改变

双向绑定：
就是数据和标签双向互关联，一方改动另一方随之改变

原理：
原理其实也非常简单，就是v-bind的动态绑定和监听input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
<!--    文本框的v-model的应用-->
    <input v-model="message" type="text">
    <br>
<!--    单选按钮的v-model的应用-->
    <input type="radio" id="male" name="sex" v-model="sex" value="nan">男
    <input type="radio" id="female" name="sex" v-model="sex" value="nv">女
    <h2>你的性别是：{{sex}}</h2>
    <br>
<!--    单选框checkbox 的v-model的应用-->
    <label for="agree">
    <input type="checkbox" id="agree" v-model="agree">同意协议
    </label>
    <h2>你选择的是{{agree}}</h2>
    <br>
<!--    复选框checkbox的v-model的应用 -->
    <input type="checkbox" value="足球" v-model="balls">足球
    <input type="checkbox" value="篮球" v-model="balls">篮球
    <input type="checkbox" value="排球" v-model="balls">排球
    <input type="checkbox" value="乒乓球" v-model="balls">乒乓球
    <h2>你选择的球类：{{balls}}</h2>
    <br>
<!--    下拉框select(单选）的v-model的应用-->
    <select v-model="vegetable">
        <option value="蔬菜">蔬菜</option>
        <option value="黄瓜">黄瓜</option>
        <option value="白菜">白菜</option>
    </select>
    <h2>你选择的蔬菜是：{{vegetable}}</h2>
<!--    下拉框select（多选）的v-model的应用-->
    <select v-model="fruits" multiple>
        <option value="水果">水果</option>
        <option value="西瓜">西瓜</option>
        <option value="葡萄">葡萄</option>
    </select>
    <h2>你选择的水果是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好',
            sex:'123',
            agree:false,
            balls:[],
            vegetable:'请选择',
            fruits:[]
        }
    })
</script>
</body>
</html>

在这里插入图片描述
v-model的修饰符：

.lazy

设置当控件失去聚焦或者敲回车的时候才会指向双向同步，如果没有.lazy每当更新就会双向同步，浪费资源
.number

尽管input标签中设置了type属性是number，输入的是number但是data中会转化为string类型，加入.number后就会转为number类型，方便数据类型转化
.trim

消去多余空格,只保留一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
<!--   .lazy修饰符的作用：设置当控件失去聚焦或者敲回车的时候才会指向双向同步，如果没有.lazy每当更新就会双向同步，浪费资源-->
    <input type="text" v-model.lazy="message">
<!--    .number修饰符的作用：尽管input标签中设置了type属性是number，输入的是number但是data中会转化为string类型，加入.number后就会转为number类型，方便数据类型转化-->
    <hr>
    <input type="number" v-model="count">
    <h2>{{typeof count}}+{{count}}</h2>
    <input type="number" v-model.number="age">
    <h2>{{typeof age}}+{{age}}</h2>
    <hr>
<!--    .trim修饰符的作用：消去多余空格,只保留一个-->
    <input type="text" v-model.trim="name">
    <h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好',
            age:10,
            count:100,
            name:''
        }
    })
</script>
</body>
</html>