vue的计算属性 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <!--计算属性
                1.定义：要用的属性不存在，要通过已有属性计算得来
                2.原理：底层借助了object。defineproperty方法提供的getter和setter
                3.get函数什么时候执行？
                    1.当初读取时会执行一次
                    2.当依赖的数据发生改变时会被再次调用
                4.优势：与methods实现相比，内部有缓存机制，效率更高，调试方便
                5.备注：
                    1.计算属性最终出现在vm上，直接读取使用即可
                    2.如果计算属性要被修改，必须要写set函数去响应修改，
            -->
            <div id="app">
                姓<input type="text" name="" id="" v-model="firstname" />
                名<input type="text" name="" id="" v-model="lastname" /><br />
                
                通过计算属性获得：<br />
                全名<span>{{fullname}}</span><br />
                
                通过methods方法获得：<br />
                全名<span>{{fullnName()}}</span><br />
            </div>
            <script type="text/javascript">
                new Vue({
                    el:'#app',
                    data:{
                        firstname:'张',
                        lastname:'里'
                    },
                    methods:{
                        fullnName(){
                            return this.firstname+'-'+this.lastname
                        }
                    },
                    computed:{
                        fullname:{
                            //get作用：当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
                            //get什么调用？1.初次读取fullname时 2.所依赖的数据发生变化时
                            get(){
                                return this.firstname+'-'+this.lastname 
                            },
                            //set什么时候调用？1.当fullname被修改时
                            set(val){
                                console.log(val)
                                var arr = val.split('-');
                                firstname = arr[0];
                                lastname = arr[1];
                            }
                        },
                        /*计算属性简写
                        //只有get的时候可以简写
                        fullname(){
                                return this.firstname+'-'+this.lastname 
                        }
                        */
                    }
                })
            </script>
    </body>
</html>

 

posted @ 2021-08-17 19:29  幻影之舞  阅读(57)  评论(0)    收藏  举报