vue计算属性

computed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{firstname}}</h1>
        <h1>{{mergername}}</h1>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                firstname:"moon",
                lastname:"linght"
            },
            computed:{
                mergername: function(){
                    return this.firstname+this.lastname
                }
            }
        })

    </script>
</body>
</html>

 

复杂操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{totalPice}}</h1>
        <h2>{{ total }}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                books:[
                    {id:1, name:"python", pice:20},
                    {id:2, name:"java", pice:30},
                    {id:3, name:"vue", pice:40},
                ],
                
            },
            computed:{
                totalPice: function(){
                    let result = 0
                    for(let i=0; i<this.books.length; i++){
                        result += this.books[i].pice
                    }
                    return result
                    
                },
                // es6语法for循环和python差不多
                total:function(){
                    let result = 0
                    for (let book of this.books){
                        result += book.pice
                    }
                    return result
                }

            }
        })

    </script>
</body>
</html>
 
computed和methods对比
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 一般不采用 -->
        <h1>{{firstname}} {{lastname}}</h1>
        <!-- 通过定义方法  调用多次方法-->
        <h1>{{getmergename()}}</h1>
        <h1>{{getmergename()}}</h1>
        <h1>{{getmergename()}}</h1>
        <h1>{{getmergename()}}</h1>
        <!-- 通过计算属性 计算属性做了缓存， 在监听属性有无变化，变化时才会重新调用-->
        <h1>{{mergername}}</h1>
        <h1>{{mergername}}</h1>
        <h1>{{mergername}}</h1>
        <h1>{{mergername}}</h1>
        
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                firstname:"moonm",
                lastname:"linght"
            },
            computed:{
                mergername: function(){
                    console.log("computed")
                    return this.firstname+ " " +this.lastname
                }
            },
            methods: {
              getmergename:function(){
                  console.log("methods")
                  return this.firstname+ " " +this.lastname
              }  
            },
        })

    </script>
</body>
</html>

 

计算属性setter和getter

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{firstname}}</h1>
        <h1>{{mergename}}</h1>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                firstname:"moonm",
                lastname:"linght"
            },
            computed:{
                // 这种是下面get方法的简写
                // mergename: function(){
                //     return this.firstname+this.lastname
                // }
                mergename: {
                    // 一般不设置set方法
                    set:function(newvalus){
                        names = newvalus.split(' ')
                        this.firstname = names[0]
                        this.lastname = names[1]
                    },
                    
                    get:function(){
                        return this.firstname + " " + this.lastname
                    }
                }
            }
        })

    </script>
</body>
</html>

 

 

 

posted @ 2023-03-14 11:07  Wchime  阅读(33)  评论(0)    收藏  举报