話不多說先上代碼
<script>
// 在講 methods 屬性前先回憶一下 我的需求是輸出 李白 天子呼來不上船
var vm = new Vue({
el:'#app',
data(){
return {
name : '李白',
language :'天子呼來不上船'
}
}
})
</script>
<div id="app">
<!-- 第一種方式 使用文本插值方式 -->
<h1>{{ name }} {{language}}</h1>
</div>
除了在文本插值的方式，我們可以使用Vue中的 computed 屬性祭椰，可以在 computed 中創(chuàng)建一個 nameLanguage 方法其中鍵名就是函數(shù)名猜嘱，比如nameLanguage毅整，而鍵值就是函數(shù)
<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>
最終輸出的也是我們希望要的結(jié)果致开。
這是在也在頁面中顯示的效果.png
除了上面的兩種方法，我們可以添加一個方法萎馅，即函數(shù)
函數(shù)必須在 Vue 的 methods 中屬性下添加喇喉，這個有點(diǎn)類似 Vue 中的計(jì)算屬性computed ，在 Vue 中校坑， 把 methods 命名為方法拣技。它也是讓我們調(diào)用對象上下文中函數(shù)，它可以操作對象中包含的數(shù)據(jù)耍目，在這個示例中對象就是 Vue 實(shí)例
var vm = new Vue({
el: '#app',
data() {
return {
name: '李白',
language: '天子呼來不上船'
}
},
methods: {
}
})
該對象的鍵將是方法的名稱膏斤，在本例中 nameLanguage 及時 methods 的方法名，其值就是一個函數(shù)
var vm = new Vue({
el: '#app',
data() {
return {
name: '李白',
language: '天子呼來不上船'
}
},
methods: {
nameLanguage(){
}
}
})
實(shí)際上邪驮，Vue的方法可以做很多事情莫辨，但是現(xiàn)在我們在這個示例的方法值返回一個字符串，它可以通過文本插值來輸出毅访。通過 this.name 可以訪問data 中的 name 屬性
var vm = new Vue({
el: '#app',
data() {
return {
name: '李白',
language: '天子呼來不上船'
}
},
methods: {
nameLanguage : function(){
return this.name + this.language
}
}
})
讓我們看看在模板中怎么使用它,事實(shí)上也是你期望的那樣簡單沮榜，在方法后面緊跟著圓括號
<div id="app">
<h1>{{ nameLanguage() }}</h1>
</div>
