1. 使用 Computed 來過濾資料。
2.使用 Computed 來呈現時間格式。
(format javascript timestamp)
3.使用watch 監控變數
1.使用 Computed 來過濾資料。
<div id="app">
<h4>Computed</h4>
<p>使用 Computed 來過濾資料。</p>
<input type="text" class="form-control" v-model="filterText">
<ul>
<li v-for="(item, key) in filterArray" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arrayData: [{
name: '小明',
age: 16
}, {
name: '漂亮阿姨',
age: 24
}, {
name: '杰倫',
age: 20
}],
filterText: ''
},
computed: {
filterArray: function() {
var _array = [];
var me = this;
_array = this.arrayData.filter(function(item) {
return item.name.match(me.filterText);
});
return _array;
}
}
);
</script>
2.使用 Computed 來呈現時間格式 - javascript timestamp。
<div id="app">
<p>使用 Computed 來呈現時間格式。</p>
<p>{{newDate}}</p>
<p>{{formatTime}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
newDate: 0
},
computed: {
// javascript 解析 timestamp
formatTime: function() {
var dates = new Date(this.newDate * 1000);
var year = dates.getFullYear();
var month = dates.getMonth() + 1;
var date = dates.getDate() + 1;
var hours = dates.getHours();
var minutes = dates.getMinutes();
// 如果分鐘要補滿兩位數，可改用這個寫法
// var minutes = (dates.getMinutes() < 10 ? '0' : '') + dates.getMinutes();
var seconds = dates.getSeconds();
return `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`
},
},
mounted() {
var me = this;
// 網頁初始化之後，將系統時間丟入newDate這個變數內
me.newDate = Math.floor(Date.now() / 1000);
}
);
</script>
3.使用watch 監控變數
<div id="app">
<p>使用 trigger 來觸發旋轉 box、並在三秒後改變回來</p>
<div class="box" :class="{'rotate': trigger }"></div>
<hr>
<button class="btn btn-outline-primary" v-on:click="trigger = true;">Counter</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
trigger: false,
},
watch: {
// 使用watch監控 trigger，如果有變動的話，過三秒鐘後調整回來
trigger: function() {
var me = this;
setTimeout(() => {
me.trigger = false;
}, 3000);
}
}
);
</script>