复盘工作-2024-08

复盘工作-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>