vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue v-bind与v-model、单向绑定与双向绑定

Vue中的v-bind与v-model、单向绑定与双向绑定、v-bind与v-model的区别

作者：五月天的尾巴

在Vue.js中,v-bind、v-model、单向数据绑定和双向数据绑定是用来处理数据流向组件的指令,它们在组件间传递数据时发挥着不同的作用,下面我将详细解释这些概念及其区别,感兴趣的朋友跟随小编一起看看吧

一、v-model与v-bind区别

v-model与v-bind区别：

1、v-bind是单向绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面。
2、v-model是双向绑定，数据能从data流向页面，也能从页面流向data。
3、v-bind可以给任何属性赋值；v-model只能给具备value属性的元素进行数据双向绑定，如text、radio、checkbox、selected。

这个原因也很好理解，从页面流向data，v-model是捕获用户的输入值，如果没有value,捕获不了，所以这个流向没有意义，v-model就是收集value值。

二、v-bind

含义 : 单向绑定 , 数据只能从data流向页面

v-bind是一个通用指令，用于动态地绑定一个或多个属性，或者一个组件prop到表达式。
它可以绑定任何类型的属性，如class、style、href等。
语法格式通常是v-bind:属性名="表达式"或简写为:属性名=“表达式”。
例如，如果你想要动态绑定一个类名，可以使用:class=“className”。

<img  :src="imageSrc"  :class="className"  />

使用示例：

<!-- 普通写法： -->
<a v-bind:href="school.url" rel="external nofollow"  rel="external nofollow" >点我去学习</a>
<!-- 简写：  -->
<a :href="school.url" rel="external nofollow"  rel="external nofollow" >点我去学习1</a>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:"tom",
            school:{
                name:"百度",
                url:"http://www.baidu.com"
            }
        }
    })
</script>

v-bind在使用时可以省略不写，直接写:即可，如上示例。

2.1、单向绑定示例

以上我们说v-bind是单向绑定，这是什么意思呢？以下结合代码示例一起看一下。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id = "root">
        <!-- 普通写法: -->
        <!-- 
        单向数据绑定：<input type="text" v-bind:value="name"/>
        双向数据绑定：<input type="text" v-model:value="name"/>
 -->
        <!-- 简写： -->
        单向数据绑定：<input type="text" :value="name"/>
        双向数据绑定：<input type="text" v-model="name1"/>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                name:'单向绑定1',
                name1:'双向绑定1'
            }
        })
    </script>
</body>
</html>

在VSCode中运行代码后如下图：

从上面我们可以看到，更改data流中的值页面会同步更新，但是更改页面输入框中的值不会影响data流中的值，因此为单向绑定。

2.2、v-bind更多示例

v-bind:属性名 =“属性值”（简写 :属性名=“属性值”)

A. 绑定属性设置属性值
B. 可以绑定任意属性,可以多个属性
C. 属性值默认"变量名" 会自动查找data中的数据; 设置字符串不会自动查找
示列:
v-bind:dage='"age1"' 字符串
v-bind:dage='age' 变量

D. 属性名也可以是data中的数据
E. v-bind:属性=“属性值” 简写 :属性=“属性值”
F. v-bind是一个单向的数据绑定 data数据流向页面,页面不会流向data

<!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>
    <style>
        .red{
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app" >
        <p :dage='"age1"' >{{name}}</p>
        <!-- <img v-bind:src="url"   alt=""> -->
        <p :class="'red'">123123</p>
        <a :[arrbu]="url1">百度</a>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                bol:false,
                arrbu:"href",
                url1:"https://www.baidu.com",
                name: "pxr",
                age: 18,
                sex: "<h1>你好</h1>",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0721%252F96b34becj00rfc5k6001mc000hs0134g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661002442&t=4b585da82705577206ee7bd27eec7d1c"
            },
        })
    </script>
</body>
</html>

三、v-model

含义 : 双向绑定 , 数据不仅能从data流向页面，还可以从页面流向data

备注：
　　1.双向绑定一般都应用在表单类元素上（如：input、select等）
　　2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

v-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected

如下示例：

<!-- 普通写法： -->
双向数据绑定：<input type="text" v-model:value="name"/>
<!--简写： -->
双向数据绑定：<input type="text" v-model="name"/>

3.1、双向绑定示例

以上我们说v-model是双向绑定，这是什么意思呢？以下结合代码示例一起看一下。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id = "root">
        <!-- 普通写法: -->
        <!-- 
        单向数据绑定：<input type="text" v-bind:value="name"/>
        双向数据绑定：<input type="text" v-model:value="name"/>
 -->
        <!-- 简写： -->
        单向数据绑定：<input type="text" :value="name"/>
        双向数据绑定：<input type="text" v-model="name1"/>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                name:'单向绑定1',
                name1:'双向绑定1'
            }
        })
    </script>
</body>
</html>

在VSCode中运行代码后如下图：

3.2、v-model更多示例

收集表单数据：

v-model的三个修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <body>
        <div id="root">
            <form @submit.prevent="demo">
                账号：<input type="text" v-model.trim="userInfo.account"> 
                密码：<input type="password" v-model="userInfo.password"> 
                年龄：<input type="number" v-model.number="userInfo.age"> 
                性别：
                男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> 
                爱好：
                学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
                所属校区
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                </select>
                其他信息：
                <textarea v-model.lazy="userInfo.other"></textarea> 
                <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com" rel="external nofollow" >《用户协议》</a>
                <button>提交</button>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    age:18,
                    sex:'female',
                    hobby:[],
                    city:'beijing',
                    other:'',
                    agree:''
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>
</body>
</html>

运行代码后，在表单中输入内容后，开发者工具中可以看到data流中的数据变化了。

四、总结

以下是v-bind和v-model的主要区别：

总的来说，v-model是Vue提供的一种简化表单元素数据绑定的方式，而v-bind则提供了更通用的数据绑定功能。

到此这篇关于Vue中的v-bind与v-model、单向绑定与双向绑定、v-bind与v-model的区别的文章就介绍到这了,更多相关vue v-bind与v-model、单向绑定与双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文