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 @   Wchime  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
·  vue高阶函数
·  vue条件判断循环
·  Vue.js 计算属性（p18~p20）
·  Vue——computed计算属性 例子
·  Vue 计算属性
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示