v-bind与v-model的区别

1、vue中数据绑定方式有3种，分别是：

（1）{{ value }}通过文本形式与data中数据属性进行绑定

（2）v-bind

（3）v-model

2、v-bind：

（1）支持类型包括html中的属性、css的样式、对象、数组、number 类型、bool类型

// 绑定文本
<p v-bind="message"></p>
 
// 绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>
 
// 绑定表达式
:class{className:true}

（2）v-model：一般对表单元素，进行双向绑定

总结：（1）改变数据框的值，{{ body }}会对应发生改变

           （2）title的位置只有在data 属性的数据发生变化时变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <div id ="element">
            <input value="name" v-model="body" />
            <h1>{{name}}.......{{body}}</h1>
            <h2  v-bind="title">{{title}}</h2>
        </div>
        
        <script type="text/javascript">
            var vm =new Vue({
                el:"#element",
                data:{
                    name:"data",
                    body:"data",
                    title:"scripts"
                }
            })
        </script>
    </body>
</html>

 

posted on 2020-08-21 14:58  ChanXM  阅读(387)  评论(0)    收藏  举报

导航