# Options API(3-1)
###### tags: `Vue`、`3. Options API`
2022.3.2

### 1. OptionAPI 與 CompositionAPP差異
OptionAPI : 分類較清楚明瞭。
CompositionAPP : 無分類，難查找。


### 2. Methods方法
* #### 指令觸發

<button type="button" @click="trigger">按鈕</button>

<script>
    methods:{
        trigger(){
            console.log('點擊按紐')
        }
    }
</script>

* #### Methods內部方法互相傳喚

<button type="button" @click="operation(1,2)">按鈕</button>

<script>
    methods:{
        operation(a,b){
            
            console.log(this.sum(a,b))
        },
        sum(a,b){
            return a+b
        }
        
    }
</script>

* #### 由生命週期(created)觸發，網頁開頭就會觸發

<script>
    methods:{
        trigger(){
            console.log('事件被觸發')
        },  
    },
    created(){
        this.trigger();
    }
</script>

### 3. 如何用methods處理複雜資料

<ul>
    <h1>產品</h1>
    <li v-for = 'item in products' :key="item.name">
        {{ item.name }} / $NT : {{ item.price }}元 / {{ item.vegan?'可以素食':'不可素食' }}
        <button type="button" @click="putcar(item)">放入購物車</button>
    </li>
    
    <h1>購物車</h1>
    <li v-for="item in carts" :key="item.name">
        {{ item.name }}        
    </li>
    
    <h2>總金額 : {{ sum }}</h2>
</ul>


<script>
    data() {
        return {
          products: [
            {
              name: '蛋餅',
              price: 30,
              vegan: false
            },
            {
              name: '飯糰',
              price: 35,
              vegan: false
            },
            {
              name: '小籠包',
              price: 60,
              vegan: false
            },
            {
              name: '蘿蔔糕',
              price: 30,
              vegan: true
            },
          ],
          carts: [],
          sum: 0,
        }
      },
      methods:{
          putcar(item){
              this.carts.push(item);
              this.calculate();
          },
          calculate(){
             let total = 0;
             this.carts.forEach(function(item){
                  total += item.price;
              }); 
              this.sum = total
          }
      }
 </script>

### 4. filter 使用 (取代複雜表達式)
  屬於之前Vue寫法，將常需顯示的資料包成一個方法，供想調用時使用。

{{ convertToAmount(sum) }}

<script>
    methods(){
        convertToAmount(price){
            return `$NT ${price}`
        }
    }
</script>