我有一个Vue应用程序,其中包含一系列复选框,可在用户选中复选框时将项目添加到数组中。可以选择大约6个项目,但是,如果选择了2个特定项目,我需要显示<div>
:
示例数组,如果检查了所有元素:
["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"]
但是,如果仅选中Apples
和Pears
并且/或如果选中Apples
或Pears
,则需要显示{{1}在视图中,为用户提供一组说明。
我尝试了这个,但它没有工作:
div
在我的vue实例中,我已经启动了这样的数据:
<div v-if="(selectedProducts.length <= 2) && ( selectedProducts.includes('Apples') || selectedProducts.includes('Pears') )">
...show mycontent...
</div>
编写此逻辑的正确方法是什么?在这种情况下我应该使用array.every()方法吗?谢谢。
答案 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);
}