文章目錄
- 1. computed（計算選項）
-
- 文法示例
- 完整示例
- 完整示例（修改data中的值）
- 2. methods（方法選項）
-
- 文法示例
- 完整示例
- N. 比較 computed & methods
-
- 不同點
- 完整示例
- 3. 過濾器
-
- 文法示例
- 完整示例
- 使用示例（過濾器串聯）
- 使用示例（ 過濾器傳參）
1. computed（計算選項）
文法示例
- 引用
- 定義
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 執行個體
return this.message.split('').reverse().join('')
}
}
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原文字串: {{ message }}</p>
<p>計算回文: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '鴉啼正落花'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
- 輸出
原文: 鴉啼正落花
回文: 花落正啼鴉
完整示例（修改data中的值）
data 中定義message 值為 “花落正啼鴉”.
conputer中包含get和set兩個get特然。get 傳回message值；set接收新值，重寫設定data中資料。
結果列印 1）get的傳回值 2）data中message值
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '花落正啼鴉',
},
computed: {
reversedMessage: {
get: function () {
return "get: " + this.message
},
set: function (newValue) {
this.message = newValue
}
}
}
})
vm.reversedMessage = '袖羅垂影瘦';
document.write('data: ' + vm.message);
</script>
</body>
</html>
- 輸出
如下可見，get中的輸出變了，列印data中的message值也變了。
2. methods（方法選項）
文法示例
- 引用
- 定義
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字串: {{ message }}</p>
<p>方法回文: {{ reversedMessage() }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '鴉啼正落花'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
N. 比較 computed & methods
不同點
- computed： 隻有相關依賴發生改變時才會重新取值
- methods： 在重新渲染的時候，函數總會重新調用執行
完整示例
為了看到computed的緩存效果，我們将兩個方法多次列印，并且每次列印的時候加上一個計數值。
如果是緩存，那麼計數值不會變化。
如果重新調用，那麼計數值會增加。
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字串: {{ message }}</p>
<p>===============計算回文================</p>
<p>計算回文: {{ reversedMessage }}</p>
<p>計算回文: {{ reversedMessage }}</p>
<p>計算回文: {{ reversedMessage }}</p>
<p>===============方法回文================</p>
<p>方法回文: {{ reversedMessage2() }}</p>
<p>方法回文: {{ reversedMessage2() }}</p>
<p>方法回文: {{ reversedMessage2() }}</p>
</div>
<script>
var cut = 1
var vm = new Vue({
el: '#app',
data: {
message: '鴉啼正落花'
},
computed: {
reversedMessage: function () {
cut += 1
return cut + ":" + this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
cut += 1
return cut + ":" + this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
- 結果顯示
Vue.js基礎-05-Vue的常用選項-01-計算選項（computed）、方法選項（methods）、過濾器（filters）1. computed（計算選項）2. methods（方法選項）N. 比較 computed & methods3. 過濾器
3. 過濾器
文法示例
定義過濾器
new Vue({
……
filters: {
}
})
使用過濾器
将資料用管道符傳到後邊的表達式中，有如下兩種方式：
- 兩個大括号
- 在v-bind中使用
完整示例
如下，message 的值通過管道符傳給 capitalize。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'guanyu'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>
使用示例（過濾器串聯）
{{ message | filterA | filterB }}
使用示例（ 過濾器傳參）
{{ message | filterA('arg1', arg2) }}
說明：
- filterA的第一個參數： message
- filterA的第二個參數： 字串 arg1
- filterA的第三個參數： 變量 arg2