vue的computed、watch和methods

参考:传送门1
传送门2
传送门3

参考了官方文档,总结如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="example">

        <input type="text" v-model="firstname">
        <input type="text" v-model="lastname">
        <input type="text" v-model="fullname">
        <input type="button" @click="getFullname()" value="点我">
    </div>
</body>
<script>
var vm = new Vue({
        el:'#example',
        data:{
            firstname:'xiao',
            lastname:'ming',
            fullname:''
        },
        computed: {// 直接计算它下面属性,不用管他有没有被动,至于牵涉到的属性都是直接计算得的
            fullname: function () {
                // `this` 指向 vm 实例
                // return this.firstname.split('').reverse().join('')
                return this.firstname+this.lastname;
            }
        },
        watch:{// 只有有动watch下面动属性了才会触发他的操作
            fullname:function () {
                this.fullname = this.firstname+this.lastname;
            }
        },
        methods: {
            getFullname:function(){
                this.fullname=this.firstname+this.lastname;
            }
        }
    });

</script>
</html>

posted @ 2020-08-28 14:46  蜗牛使劲冲  阅读(2)  评论(0编辑  收藏  举报  来源