Vue——26——computed计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname:'',
                lastname:''

            },
            methods: {},
            /*在computed中,可以定义一些属性,这些属性叫做计算属性,计算属性的本质就是一个方法 
            只不过我们在使用这些计算属性的时候,是把他们的名称直接当做属性来使用的
            并不会把计算属性当做方法去调用*/
            /*注意1:计算属性在引用的时候一定不要加()去调用,直接把它当普通属性去使用
            注意2:只要计算属性这个function内部所用到的任何data中的数据发生了变化
            就会立即重新计算这个计算属性的值 
            注意3:计算属性的求值结果会被缓存起来,方便下次直接使用,如果计算属性方法中,所依赖的
            任何属性都没有发生过变化,则不会重新对计算属性求值*/
            computed:{
                'fullname':function(){
                    return this.firstname+'-'+this.lastname
                }
            }
        })
    </script>
</body>

</html>

computed计算属性里必须有个return，主要当作属性来使用
methods主要用于业务逻辑的处理，一个具体的操作
watch一个对象，键是需要观察的表达式，值是对应的回调函数，，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作上面两个的结合体

Vue——26——computed计算属性

猜你喜欢