美文网首页
三.methods属性

三.methods属性

作者: A_x_A | 来源:发表于2019-03-10 22:48 被阅读0次

    methods 名字固定 ,是一个对象,用于储存方法
    调用方法--------------------- {{方法名()}}

    调用方法时,同时传参数

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <h2>{{greeting('afternoon')}}</h2>
                <h2>{{message}}</h2>
            </div>
            
            <script type="text/javascript">
                //实例化一个vue对象
                var app = new Vue({
                    el: '#app',
                    data:{
                        message:'Hello Vue!',
                    },
                    
                    methods:{
                        greeting:function(time){
                            return 'Good' + time+'!';
                        }
                    }
                })
            </script>
        </body>
    </html>
    

    如果要在当前对象中拿data的属性,直接使用Vue实例化的对象.name就可以了,调用方法时也是直接拿对应的方法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <h2>{{greeting('afternoon')}}</h2>
                <h2>{{message}}</h2>
            </div>
            
            <script type="text/javascript">
                //实例化一个vue对象
                var app = new Vue({
                    el: '#app',
                    data:{
                        message:'Hello Vue!',
                        name:'软件1721'
                    },
                    
                    methods:{
                        greeting:function(time){
                            return 'Good' + time+'!' +this.name;
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    对象.name.png

    相关文章

      网友评论

          本文标题:三.methods属性

          本文链接:https://www.haomeiwen.com/subject/fegupqtx.html