Vue_8:计算属性

最新推荐文章于 2024-08-04 23:53:36 发布

易辰不呆

最新推荐文章于 2024-08-04 23:53:36 发布

阅读量55

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wcj28738/article/details/120905641

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<body>
    <!--名字案例_插值语法实现-->
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/>
        名:<input type="text" v-model="lastName"><br/>
        姓名:<span>{{firstName.slice(0,3)}} - {{lastName}}</span>
    </div>
</body>
    
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        }
    })
</script>

<body>
    <!--名字案例_methods语法实现-->
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/>
        名:<input type="text" v-model="lastName"><br/>
        姓名:<span>{{ fullName() }}</span>
    </div>
</body>
    
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                return this.firstName + '-' + this.lastName    
            }
            
        },
    })
</script>

<body>
    <!--名字案例_计算属性实现-->
    <!--
        计算属性:
            1.定义:要用的数据不存在,需要通过已有的属性计算得来
            2.原理:底层借助Object.defineProrerty方法提供的getter和setter实现
            3.get函数什么时候被执行
                (1)初次赋值时
                (2)所依赖的数据发生改变时
            4.优势:与methods方法相比,内部有缓存机制(复用),效率更高,调试方便
            5.备注:
                1.计算属性最终会出现在vm上,直接读取使用即可
                2.如果计算属性要被修改,那么必须调用setter去响应修改,且set中要引起计算时依赖的数据发生改变
    -->
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/>
        名:<input type="text" v-model="lastName"><br/>
        姓名:<span>????</span>
    </div>
</body>
    
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                //get有什么用:当有人调用fullName时,get会被调用,返回值时fullName的值
                //get在什么时候会被调用:1.初次赋值时2.所依赖的数据发生改变时
                get(){
                    return this.firstName + '-' + this.last.Name
                }
                //set什么时候会被调用,当fullName被修改时
                set(value){
                    const arr = value.spit('-')
                    this.firstName = arr[0]
                    this.lastName  = arr[1]
                }
            }
        }
    })
</script>

易辰不呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_8:计算属性

<body>  <div id="root"> 姓:<input type="text" v-model="firstName"><br/> 名:<input type="text" v-model="lastName"><br/> 姓名:<span>{{firstName.slice(0,3)}} - {{la.
复制链接

扫一扫