methods，watch，computed比较

1.methods，表示具体的操作，主要书写业务逻辑：

        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-xs-2 control-label col-xs-offset-1" for="msg">Message:</label>
                <div class="col-xs-6">
                    <input type="text" class="form-control" placeholder="Message" id="msg" v-model="msg" @keyup="add" /> //绑定事件keyup
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label col-xs-offset-1" for="pwd">Password:</label>
                <div class="col-xs-6">
                    <input type="password" class="form-control" placeholder="password" id="pwd" v-model="pwd"
                        @keyup="add" /> //绑定事件keyup
                </div>
            </div>
        </form>

    methods: {
        add() { //事件所调用的方法
            this.show = this.msg + '/' + this.pwd;
        }
    }

2.watch，监听到data有变化时，触发函数：

//无需做额外操作
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-xs-2 control-label col-xs-offset-1" for="msg">Message:</label>
                <div class="col-xs-6">
                    <input type="text" class="form-control" placeholder="Message" id="msg" v-model="msg" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label col-xs-offset-1" for="pwd">Password:</label>
                <div class="col-xs-6">
                    <input type="password" class="form-control" placeholder="password" id="pwd" v-model="pwd" />
                </div>
            </div>
        </form>

    watch: {
        msg() { //msg改变时触发
            this.show = this.msg + "/" + this.pwd;
        },
        pwd() { //pwd改变时触发
            this.show = this.msg + "/" + this.pwd;
        }
    }

3.computed，定义属性，结果以函数返回：

        <div class="container">
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" v-model="show" />
                </div>
            </form>
        </div>

    data: {
        msg: '',
        pwd: ''
    }, //data中不重复定义show
    computed: {
        show() {
            return this.msg + "/" + this.pwd;
        }
    }