VueJS2:如何检查数组是否包含特定元素?

时间:2017-09-13 17:06:32

标签: javascript vuejs2

我有一个Vue应用程序,其中包含一系列复选框,可在用户选中复选框时将项目添加到数组中。可以选择大约6个项目,但是,如果选择了2个特定项目,我需要显示<div>

  

示例数组,如果检查了所有元素:

["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"]

但是,如果仅选中ApplesPears并且/或如果选中ApplesPears,则需要显示{{1}在视图中,为用户提供一组说明。

  

我尝试了这个,但它没有工作:

div
  

在我的vue实例中,我已经启动了这样的数据:

<div v-if="(selectedProducts.length <= 2) && ( selectedProducts.includes('Apples') || selectedProducts.includes('Pears') )">
...show mycontent...
</div>

编写此逻辑的正确方法是什么?在这种情况下我应该使用array.every()方法吗?谢谢。

4 个答案:

答案 0 :(得分:0)

你可以像这样直接比较

Prelude> import Data.List(intercalate)
Prelude Data.List> intercalate "," ["foo","bar","qux"]
"foo,bar,qux"

答案 1 :(得分:0)

你可以尝试

[Updating post to include SHOW VARIABLES like 'innodb%']
sql> show variables like 'innodb%';
+------------------------------------------+------------------------+
| Variable_name                            | Value                  |
+------------------------------------------+------------------------+
| innodb_adaptive_flushing                 | ON                     | 
| innodb_adaptive_flushing_lwm             | 10                     | 
| innodb_adaptive_hash_index               | ON                     | 
| innodb_adaptive_hash_index_parts         | 8                      | 
| innodb_adaptive_max_sleep_delay          | 150000                 | 
| innodb_api_bk_commit_interval            | 5                      | 
| innodb_api_disable_rowlock               | OFF                    | 
| innodb_api_enable_binlog                 | OFF                    | 
| innodb_api_enable_mdl                    | OFF                    | 
| innodb_api_trx_level                     | 0                      | 
| innodb_autoextend_increment              | 64                     | 
| innodb_autoinc_lock_mode                 | 1                      | 
| innodb_buffer_pool_chunk_size            | 134217728              | 
| innodb_buffer_pool_dump_at_shutdown      | ON                     | 
| innodb_buffer_pool_dump_now              | OFF                    | 
| innodb_buffer_pool_dump_pct              | 25                     | 
| innodb_buffer_pool_filename              | ib_buffer_pool         | 
| innodb_buffer_pool_instances             | 8                      | 
| innodb_buffer_pool_load_abort            | OFF                    | 
| innodb_buffer_pool_load_at_startup       | ON                     | 
| innodb_buffer_pool_load_now              | OFF                    | 
| innodb_buffer_pool_size                  | 53687091200            | 
| innodb_change_buffer_max_size            | 25                     | 
| innodb_change_buffering                  | all                    | 
| innodb_checksum_algorithm                | crc32                  | 
| innodb_checksums                         | ON                     | 
| innodb_cmp_per_index_enabled             | OFF                    | 
| innodb_commit_concurrency                | 0                      | 
| innodb_compression_failure_threshold_pct | 5                      | 
| innodb_compression_level                 | 6                      | 
| innodb_compression_pad_pct_max           | 50                     | 
| innodb_concurrency_tickets               | 5000                   | 
| innodb_data_file_path                    | ibdata1:12M:autoextend | 
| innodb_data_home_dir                     |                        | 
| innodb_deadlock_detect                   | ON                     | 
| innodb_default_row_format                | dynamic                | 
| innodb_disable_sort_file_cache           | OFF                    | 
| innodb_doublewrite                       | ON                     | 
| innodb_fast_shutdown                     | 1                      | 
| innodb_file_format                       | Barracuda              | 
| innodb_file_format_check                 | ON                     | 
| innodb_file_format_max                   | Barracuda              | 
| innodb_file_per_table                    | ON                     | 
| innodb_fill_factor                       | 100                    | 
| innodb_flush_log_at_timeout              | 1                      | 
| innodb_flush_log_at_trx_commit           | 2                      | 
| innodb_flush_method                      | O_DIRECT               | 
| innodb_flush_neighbors                   | 1                      | 
| innodb_flush_sync                        | ON                     | 
| innodb_flushing_avg_loops                | 30                     | 
| innodb_force_load_corrupted              | OFF                    | 
| innodb_force_recovery                    | 0                      | 
| innodb_ft_aux_table                      |                        | 
| innodb_ft_cache_size                     | 8000000                | 
| innodb_ft_enable_diag_print              | OFF                    | 
| innodb_ft_enable_stopword                | ON                     | 
| innodb_ft_max_token_size                 | 84                     | 
| innodb_ft_min_token_size                 | 3                      | 
| innodb_ft_num_word_optimize              | 2000                   | 
| innodb_ft_result_cache_limit             | 2000000000             | 
| innodb_ft_server_stopword_table          |                        | 
| innodb_ft_sort_pll_degree                | 2                      | 
| innodb_ft_total_cache_size               | 640000000              | 
| innodb_ft_user_stopword_table            |                        | 
| innodb_io_capacity                       | 15000                  | 
| innodb_log_files_in_group                | 2                      |
| innodb_log_group_home_dir                | ./                     |
| innodb_log_write_ahead_size              | 8192                   |
| innodb_lru_scan_depth                    | 256                    |
| innodb_max_dirty_pages_pct               | 75.000000              |
| innodb_max_dirty_pages_pct_lwm           | 0.000000               |
| innodb_max_purge_lag                     | 0                      |
| innodb_max_purge_lag_delay               | 0                      |
| innodb_max_undo_log_size                 | 1073741824             |
| innodb_monitor_disable                   |                        |
| innodb_monitor_enable                    |                        |
| innodb_monitor_reset                     |                        |
| innodb_monitor_reset_all                 |                        |
| innodb_numa_interleave                   | OFF                    |
| innodb_old_blocks_pct                    | 37                     |
| innodb_old_blocks_time                   | 1000                   |
| innodb_online_alter_log_max_size         | 134217728              |
| innodb_open_files                        | 400                    |
| innodb_optimize_fulltext_only            | OFF                    |
| innodb_page_cleaners                     | 4                      |
| innodb_page_size                         | 16384                  |
| innodb_print_all_deadlocks               | OFF                    |
| innodb_purge_batch_size                  | 300                    |
| innodb_purge_rseg_truncate_frequency     | 128                    |
| innodb_purge_threads                     | 4                      |
| innodb_random_read_ahead                 | OFF                    |
| innodb_read_ahead_threshold              | 56                     |
| innodb_read_io_threads                   | 4                      |
| innodb_read_only                         | OFF                    |
| innodb_replication_delay                 | 0                      |
| innodb_rollback_on_timeout               | OFF                    |
| innodb_rollback_segments                 | 128                    |
| innodb_sort_buffer_size                  | 1048576                |
| innodb_spin_wait_delay                   | 6                      |
| innodb_stats_auto_recalc                 | ON                     |
| innodb_stats_include_delete_marked       | OFF                    |
| innodb_stats_method                      | nulls_equal            |
| innodb_stats_on_metadata                 | OFF                    |
| innodb_stats_persistent                  | ON                     |
| innodb_stats_persistent_sample_pages     | 20                     |
| innodb_stats_sample_pages                | 8                      |
| innodb_stats_transient_sample_pages      | 8                      |
| innodb_status_output                     | OFF                    |
| innodb_status_output_locks               | OFF                    |
| innodb_strict_mode                       | ON                     |
| innodb_support_xa                        | ON                     |
| innodb_sync_array_size                   | 1                      |
| innodb_sync_spin_loops                   | 30                     |
| innodb_table_locks                       | ON                     |
| innodb_temp_data_file_path               | ibtmp1:12M:autoextend  |
| innodb_thread_concurrency                | 16                     |
| innodb_thread_sleep_delay                | 0                      |
| innodb_tmpdir                            |                        |
| innodb_undo_directory                    | ./                     |
| innodb_undo_log_truncate                 | OFF                    |
| innodb_undo_logs                         | 128                    |
| innodb_undo_tablespaces                  | 0                      |
| innodb_use_native_aio                    | ON                     |
| innodb_version                           | 5.7.18                 |
| innodb_write_io_threads                  | 16                     |
+------------------------------------------+------------------------+

而不是

selectedProducts.indexOf('Apples') !== -1

答案 2 :(得分:0)

如果我理解正确,你想要显示DIV,如果选择苹果和梨,只选择了两个项目,或者选择了一个项目,产品是苹果或梨。

如果这是真的,那么这是一个计算出来的。

computed:{
  matched(){
    let pears = this.selectedProducts.includes("Pears")
    let apples = this.selectedProducts.includes("Apples")
    if (this.selectedProducts.length === 2 && pears && apples) return true
    if (this.selectedProducts.length === 1 && (apples || pears)) return true
    return false
  }
}

工作示例:

console.clear()

new Vue({
  el: "#app",
  data:{
    products: ["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"],
    selectedProducts: []
  },
  methods:{
    onChange(evt, product){
      if (evt.target.checked){
        this.selectedProducts.push(product)
      } else {
        this.selectedProducts.splice(this.selectedProducts.indexOf(product), 1)
      }
    }
  },
  computed:{
    matched(){
      let pears = this.selectedProducts.includes("Pears")
      let apples = this.selectedProducts.includes("Apples")
      if (this.selectedProducts.length === 2 && pears && apples) return true
      if (this.selectedProducts.length === 1 && (apples || pears)) return true
      return false
    }
  }
})
<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <div v-for="product in products">
    <label for=""><input type="checkbox" :value="product" @change="onChange($event, product)"> {{product}}</label>
  </div>
  {{selectedProducts}}
  
  <hr>
  <div v-if="matched">
    Matched Criteria
  </div>
</div>

答案 3 :(得分:0)

嗨,这应该可以帮助您查找列表是否包含某个元素。

    if (cls.attributes.tags.includes("dance")) {
        console.log(cls.attributes.title);
      }