vue双向绑定或单项绑定

最新推荐文章于 2024-06-14 09:44:41 发布

你的美，让我痴迷

最新推荐文章于 2024-06-14 09:44:41 发布

阅读量283

点赞数

分类专栏： vue 文章标签： vue.js typescript 前端

本文链接：https://blog.csdn.net/weixin_45932157/article/details/122954480

版权

vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性以及基本使用</title>
    <script src="../tool/vue.js"></script>

</head>
<body>
    <div  id="app">
        <p>姓：<input type="text"  placeholder="First  Name"  v-model="firstName" ></p>
       <p> 名：<input type="text"  placeholder="Last  Name"  v-model="lastName"></p>
        <p>姓名1（单向）<input type="text" placeholder="full Name1"  v-model="fullname1" ></p>
        <p>姓名2（单向）<input type="text" placeholder="full Name2"  v-model="fullName2"></p>
        <p>姓名3（双向）<input type="text" placeholder="full Name3"  v-model="fullname3" ></p>

    </div>
    <script  type="text/javascript"  >
        var  vm =new  Vue({
            el:'#app',
            data:{
                firstName:'A',
                lastName:'B',
                fullName2:''
            },
            computed:{
                 fullname1:function () {
                     return   this.firstName+' '+this.lastName;
                 },
                fullname3:{
                     get(){
                         return  this.firstName+" "+this.lastName;
                    },
                    set(val){
                         var    names=val.split(' ');
                         this.firstName=names[0];
                         this.lastName=names[1];
                    }
                }
            },
            watch:{

                firstName:function(value){
                    console.log(value);
                    this.fullName2=value+' '+this.lastName;

                }
            }

        })
    </script>
</body>
</html>