覆盤工作-2024-08

平凡力量發表於2024-08-02

覆盤工作-2024-08-01

1.vue裡:disabled繫結接收一個函式來動態決定其值，而不僅限於簡單的表示式

2.js判陣列是否含有某元素：.includes()

上述兩點的練習程式碼：

<template>
    <f7-page>
        <!-- :disabled接收true、false值例子： -->
<!--              海島名稱：<input id="islandName" name="islandName" :disabled="isIslandNameDisabled"></input>-->
        <!-- :disabled接收簡單表示式例子： -->
<!--              海島名稱：<input id="islandName" name="islandName" :disabled="cityName != 'YanTai'"></input>-->
        <!-- :disabled接收函式例子： -->
        海島名稱：<input id="islandName" name="islandName" :disabled="isNotCoastalCity()"></input>
    </f7-page>
</template>

<script>
    export default {
        data() {
            return{
                // isAppleTypeNameDisabled: false,
                cityName: 'YanTai',
                coastalCityArr: ['QingDao', 'DaLian', 'YanTai', 'WeiHai']
            }
        },
        methods: {
          /**
           * 判斷是否：不是沿海城市（根據其是否在沿海城市這個js陣列裡），返回true（不是沿海城市）/false（是沿海城市），控制input框是否可編輯
           *
           * .includes() 判斷陣列是否包含某元素
           */
          isNotCoastalCity() {
            return !this.coastalCityArr.includes(this.cityName);
          }
        }
    }
</script>

相關文章