Vue中的数据绑定

最新推荐文章于 2025-05-22 00:51:12 发布

原创最新推荐文章于 2025-05-22 00:51:12 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 同时被 2 个专栏收录

39 篇文章

订阅专栏

Vue

39 篇文章

订阅专栏

v-bind

缩写：：
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
主要作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class

官方举例：

<!-- bind an attribute -->
<img v-bind:src="imageSrc">
<!-- shorthand -->
<img :src="imageSrc">
<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop binding. "prop" must be declared in my-component. -->
<my-component :prop="someThing"></my-component>
<!-- two-way prop binding -->
<my-component :prop.sync="someThing"></my-component>
<!-- one-time prop binding -->
<my-component :prop.once="someThing"></my-component>

源码

<!-- v-bind数据绑定 -->
<!--数据绑定-->
<input type="text" v-bind:value="name">
<!--数据绑定简写-->
<input type="text" :value="name">
<a v-bind="{href:'http://aa/' + id}">跳转</a>
var vm = new Vue({
    el:'#app'
    ,data:{
        name:'张三'
        ,id:1
    }
});

结果

在这里插入图片描述

从上面的图中我们可以看出v-bind:value和:value均能将name字段绑定到文本框中，而第三个则将用v-bind绑定超链接并传参，其传递的参数成功的绑定到了超链接上，如下所示的超链接内容;

在这里插入图片描述

v-model

主要作用：在表单控件或者组件上创建双向数据绑定
使用范围：
- <input>
- <select>
- <textarea>
参数属性
- lazy
- number
- debounce

源码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <!-- v-model双向数据绑定 -->
        <input type="text" placeholder="请输入姓" id="lastname" v-model="fullname.lastname">
        <input type="text" placeholder="请输入名" id="firstname" v-model="fullname.firstname">
        <button @click="alertDialog()">弹出</button>
    </div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el:'#app'
        ,data:{
            fullname:{
                firstname:''
                ,lastname:''
            }
        }
        ,methods:{
            alertDialog(){
                alert(this.fullname.lastname + this.fullname.firstname);
            }
        }
    });
</script>
</html>

结果

在这里插入图片描述

如上图中我们可以看出（动图），使用v-model，在文本框中输入内容后能够成功弹出姓名全称，而在控制台中，我们通过变更控制台中的数据对象，其文本框中对应的数据也会随之发生改变，而该改变之后的数据也能够成功的弹出并正确的现实出来，这就是数据的双向绑定操作。

完整源码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <!-- v-bind数据绑定 -->
        <!--数据绑定-->
        <input type="text" v-bind:value="name">
        <!--数据绑定简写-->
        <input type="text" :value="name">
        <a v-bind="{href:'http://aa/' + id}">跳转</a>
        <hr>
        <!-- v-model双向数据绑定 -->
        <input type="text" placeholder="请输入姓" id="lastname" v-model="fullname.lastname">
        <input type="text" placeholder="请输入名" id="firstname" v-model="fullname.firstname">
        <button @click="alertDialog()">弹出</button>
    </div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el:'#app'
        ,data:{
            name:'张三'
            ,id:1
            ,fullname:{
                firstname:''
                ,lastname:''
            }
        }
        ,methods:{
            alertDialog(){
                alert(this.fullname.lastname + this.fullname.firstname);
            }
        }
    });
</script>
</html>