• v-bind指令。它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。
  • v-model 指令在表单控件元素上创建双向数据绑定。所谓双向绑定,在vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据最基础的就是实现一个联动的效果。但是v-bind只能做到从vue实例的data绑定到dom页面,做不到相应的更新。

简写

v-bind可以简写为:

插值表达式

  • {{}}插值表达式里面 只能写表达式,不能写语句
  • 文本输出,不会解析标签
  • 不能作用在标签的属性上,设置属性值,只能用于标签内部用于显示数据
<body>
    <div id="app">
        名字:{{msg}}
        <br>
        学号:{{num}}
        <br>

    </div>
</body>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'王小明',
            num:'320'
        }
    })
</script>

执行结果为:

名字:王小明
学号:320

由此可见,差值表达式可以将data里的数据绑定到页面上。

v-bind和v-model的区别

两者最大区别在于:v-bind是单向的绑定,是页面绑定data中的数据,data中数据改了dom页面也会一起改,但是双向数据绑定;v-model是双向绑定,data和dom内容始终保持一致。

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            名字:{{msg}}
            <br>
            学号:{{num}}
            <br>
            <input type="text" v-bind:value="msg" />
            <input type="text" :value="msg" />
            v-bind:和:效果是一样的
            <br>
            <input type="text" v-model:value="msg" />
            <br>
            <input type="button" :value="but" @click="changeMsg">
        </div>
    </body>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'窦思睿',
                num:'320',
                but:"这是一个按钮"
            },
            methods:{
                changeMsg(){
                    this.msg="我是小豆子"
                }
            }
        })
    </script>
</html>
  • 我在按钮单击事件上绑定了changeMsg()方法,在单击后会将msg中的"王小明"变成"我是小豆子",当单击时,所有文本框都发生了改变,原因是绑定了data数据,vue检测到了data中数据改了就会刷新dom页面的内容。
  • 头两个并排一行的文本框是使用v-bind绑定的,修改文本框中的内容并不会改变其他文本框内容,因为数据是单向绑定的,所以不会修改。
  • 下面单个文本框是v-model绑定的,由于是双向绑定,修改时会修改data中的数据,所以所有绑定的文本框都会改变。
最后修改:2020 年 10 月 21 日 12 : 09 AM
如果觉得我的文章对你有用,请随意赞赏