vue v-model

旧城等待， 2022-02-27 12:00 126阅读 0赞

1、属性绑定

v-bind ：

例如

<div id="root">  
        <div v-bind:title="title">hello world</div>  
</div>  
<script>  
    new Vue(\{  
        el:"\#root",  
        data:\{  
           title:"this is hello world"  
        \}  
    \})  
</script>  
v-bind可以缩写为“：”

即<div v-bind:title="title">hello world</div>可以写为  
<div :title="title">hello world</div>  
单向绑定：数据决定页面的显示，但页面不能决定数据的内容

双向绑定：数据决定页面的显示，但页面也能修改数据的内容

用v-model实现双向绑定

例如

<div id="root">  
    <input type="text" v-model:value="content">//当修改input的值时，content的值也会做相应修改  
    <div>\{ \{content\}\}</div>  
</div>  
<script>  
    new Vue(\{  
        el:"\#root",  
        data:\{  
            content: "this is content"  
             \},  
         
    \})  
</script>

2、vue中的计算属性和侦听器

2.1计算属性computed：一个属性通过其他属性计算而来

fullName由firstName和lastName计算而来.

当firstName和lastName不发生变化时，fullName不会重新计算而是调用缓存值，提高了程序效率。

<div id="root">  
        姓：<input type="text" v-model:value="firstName">  
        名：<input type="text" v-model:value="lastName">  
        <div>\{ \{fullName\}\}</div>  
        <div>\{ \{count\}\}</div>  
    </div>  
    <script>  
        new Vue(\{  
            el: "\#root",  
            data: \{  
                firstName: '',  
                lastName: '',                  
            \},  
            //计算属性  
            computed:\{   
                fullName: function () \{  
                    return this.firstName+" "+this.lastName  
                \}  
            \},                       
        \})  
    </script>  
展示

2.1侦听器watch：监听某个数据的变化，一旦数据发生变化，就可以在侦听器中进行逻辑计算

<div id="root">  
        姓：<input type="text" v-model:value="firstName">  
        名：<input type="text" v-model:value="lastName">  
        <div>\{ \{fullName\}\}</div>  
   
    </div>  
    <script>  
        new Vue(\{  
            el: "\#root",  
            data: \{  
                firstName: '',  
                lastName: '',  
                fullName: ''  
            \},             
            watch:\{  
                firstName:function () \{  
                    this.fullName=this.firstName+" "+this.lastName;  
                \},  
                lastName: function () \{  
                    this.fullName=this.firstName+" "+this.lastName;  
                \}  
            \}  
        \})  
    </script>  
结果展示：

2.3 计算属性computed的getter和setter：

<div id="root">  
    \{ \{fullName\}\}  
</div>  
<script>  
    var vm=new Vue(\{  
        el: "\#root",  
        data: \{  
            firstName: 'Dell',  
            lastName: 'Lee',  
            fullname: 'Dell Lee'  
        \},  
        computed:\{  
            fullName:\{  
                get: function () \{  
                    return this.firstName+" "+this.lastName  
                \},  
                set: function (value) \{  
                    var arr=value.split(" ");  
                    this.firstName=arr\[0\];  
                    this.lastName=arr\[1\];  
                \}  
            \}  
        \}  
       
    \})