原csdn地址https://blog.csdn.net/w|

蜗牛使劲冲

园龄:7年6个月粉丝:3关注:10

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>

本文作者:蜗牛使劲冲

本文链接:https://www.cnblogs.com/warrenwt/p/18074563

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   蜗牛使劲冲  阅读(4)  评论(0编辑  收藏  举报  
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起