美文网首页
Vue中的计算属性

Vue中的计算属性

作者: 疯狂的蜗牛Dianna | 来源:发表于2019-12-29 17:26 被阅读0次

    写在 computed 里面 计算属性也是属性,写起来像一个函数/方法,用起来像一个属性

    特点1:必须有返回值

    特点2:可以使用data中已经存在的属性

    特点3:只随着相关的属性变化而变化

    code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <h1>{{num}}</h1>
        </div>
        <script src='./node_modules/vue/dist/vue.js'></script>
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    num1: 100,
                    num2: 200
                },
                computed: {
                    num() {
                        return 100 + this.num2
                    }
                }
            });
        </script>
    </body>
    
    </html>
    

    代码运行

    computed-01.PNG

    相关文章

      网友评论

          本文标题:Vue中的计算属性

          本文链接:https://www.haomeiwen.com/subject/cdqnuctx.html