xinggevip

Vue2.x_1.5computed计算属性
app.jsnew Vue({ el:"#vue-app", data:{ ...
扫描右侧二维码阅读全文
16
2019/05

Vue2.x_1.5computed计算属性

app.js

new Vue({
    el:"#vue-app",
    data:{
        a:10,
        b:20,
        age:100,
    },
    methods:{
        /*suma:function () {
            console.log("adda");
            return this.a + this.age;
        },
        sumb:function () {
            console.log("addb");
            return this.b + this.age;
            */
        },
        computed:{
            suma:function () {
                console.log("adda");
                return this.a + this.age;
            },
            sumb:function () {
                console.log("addb");
                return this.b + this.age;
        }
    },
})

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">
        <h1>Computed计算属性</h1>
        <button v-on:click="a++">Add a</button>
        <button v-on:click="b++">Add b</button>

        <p>{{a}}</p>
        <p>{{b}}</p>
        <p>a + age = {{suma}}</p>
        <p>b + age = {{sumb}}</p>
    </div>

    <script src="app.js"></script>
</body>
</html>

效果

只执行指定函数
http://hao.qiangssvip.com/vuestudy/Lesson05

Last modification:May 21st, 2019 at 09:21 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment