###### tags:`Vue`
# 5.Vue computed_watch

1. Computed
(*不需要一個button來觸發事件去計算,直接計輸出結果,但資料量大時會產生效能的影響)
3. 使用 Computed 來呈現時間格式。
4. Watch
(*監控用以監聽某個數據，並觸發相對應的處理。)

## 1.Computed
(*不需要一個button來觸發事件去計算,直接計輸出結果,但資料量大時會產生效能的影響)

> Q:在輸入框輸入文字,快速撈到對應選項
> 1.input type使用<kbd class="mx-5">v-model="filterText"</kbd>
> 2.filterText在Script的 data裡,寫為空字串<kbd class="mx-5"> filterText: '',</kbd>
> 3.ul li輸出結果,使用<kbd class="mx-5"> v-for="(item, key) in filterArray"</kbd>輸出陣列裡面資料
> 因為是動態key所以 , <kbd class="mx-5">:key="item.age"</kbd>,key前面加上:冒號

<style>
.mx-5{
margin-left:5px;
margin-right:5px;
}
</style>

#### <kbd class="mx-5"> function </kbd>和<kbd class="mx-5">return</kbd>關係
####需要回傳值的function就像自動販賣機，投入錢以後按下指定商品，出口處會掉出(return)我們指定的商品

### 腳本行為
### 1.回傳值到畫面-->從arrayData畫面上選項所有data裡面,fliter item挑選
### 2.回傳item.name match配對input type輸入的filterText

 computed: {


              filterArray: function () {
                var vm = this;
                return vm.arrayData.filter(function (item) {

                  return item.name.match(vm.filterText)
                })
              },
              
 },

<iframe height="265" style="width: 100%;" scrolling="no" title="vue-computed_watch" src="https://codepen.io/corly74/embed/zYopNzK?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/zYopNzK'>vue-computed_watch</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>