vue学习之计算属性

计算属性关键词: computed

  • 计算属性可以通过写一些方法用于处理元数据。例子中messageUpper函数将message的值变为大写。
  • 计算属性默认只有 getter ,setter 需要自己提供。例子中输入栏提供修改message的值。

例子:

这里写图片描述

代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id = "app">
        输入:<input v-model="message"><br/>
        输入原文:{{message}}<br/>
        原文的大写:{{messageUpper}}
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message:'hello vue!'
            },
            computed: {
                messageUpper: function(){
                    return this.message.toUpperCase();
                },
                get:function(){
                    return this.message;
                },
                set: function(newValue){
                    this.message = newValue;
                }
            }
        });
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/summerpowerz/article/details/80687148