vue v-model

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];
                }
            }
        }
     
    })

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值