Vue的Methods

话不多说先上代码

<script>
        //  在讲 methods 属性前先回忆一下 我的需求是输出 李白 天子呼来不上船

         var vm = new Vue({
            el:'#app',
            data(){
                return {
                    name : '李白',
                    language :'天子呼来不上船'
                }
            }

         })
     </script>

<div id="app">
        <!-- 第一种方式 使用文本插值方式 -->
        <h1>{{ name }} {{language}}</h1>
    </div>

除了在文本插值的方式，我们可以使用Vue中的 computed 属性，可以在 computed 中创建一个 nameLanguage 方法其中键名就是函数名，比如nameLanguage，而键值就是函数

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '李白',
                    language: '天子呼来不上船'
                }

            },
            computed: {
             nameLanguage(){
                 return this.name +':'+ this.language
             }  
            }

        })
    </script>

这个时候，我们在元素中插入nameLanguage，如下：

 <div id="app">
        <h1>{{ nameLanguage }}</h1>
    </div>

最终输出的也是我们希望要的结果。

这是在也在页面中显示的效果.png

除了上面的两种方法，我们可以添加一个方法，即函数
函数必须在 Vue 的 methods 中属性下添加，这个有点类似 Vue 中的计算属性computed ，在 Vue 中， 把 methods 命名为方法。它也是让我们调用对象上下文中函数，它可以操作对象中包含的数据，在这个示例中对象就是 Vue 实例

 var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '李白',
                    language: '天子呼来不上船'
                }

            },
            methods: {

            }
        })

该对象的键将是方法的名称，在本例中 nameLanguage 及时 methods 的方法名，其值就是一个函数

 var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '李白',
                    language: '天子呼来不上船'
                }

            },
            methods: {
                nameLanguage(){
                    
                }
            }
        })

实际上，Vue的方法可以做很多事情，但是现在我们在这个示例的方法值返回一个字符串，它可以通过文本插值来输出。通过 this.name 可以访问data 中的 name 属性

var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '李白',
                    language: '天子呼来不上船'
                }

            },
            methods: {
                nameLanguage : function(){
                    return this.name + this.language
                }
            }
        })

让我们看看在模板中怎么使用它,事实上也是你期望的那样简单，在方法后面紧跟着圆括号

 <div id="app">
        <h1>{{ nameLanguage() }}</h1>
    </div>