话不多说先上代码
<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>
