搜尋
首頁web前端js教程Vue中v-show新增表達式的問題(判斷是否顯示)
Vue中v-show新增表達式的問題(判斷是否顯示)May 29, 2018 am 09:41 AM
v-show判斷表達式

這篇文章主要介紹了關於Vue中v-show中添加表達式用於判斷是否顯示的問題,很多朋友經常會遇到這樣的需求,有數據來源和標籤類型兩行選項,需要實現點擊上面的某個資料來源時,標籤類型會自動切換功能,有興趣的朋友一起看看吧

一、需求場景

## 1.先來說說我的需求,有資料來源和標籤類型兩行選項,如下圖所示:

2、根據需求,我需要在點擊上面的某個資料來源的時候,下面的標籤類型會自動切換,

需求說明如下:

3、一開始是想寫死的,就是把各種情​​況寫死在頁面上,後來查看官方文檔一會,資料來源的集合可以這樣寫,id為各個類型的標識,name為名稱,mark為點擊某個資料來源的時候標籤類型根據當前點擊的資料來源進行判斷切換。如下圖:

 infoTypeList: [
 {
  id: 11,
  name: '新闻',
  mark: 'news'
 },
 {
  id: 13,
  name: '论坛',
  mark: 'bbs'
 },
 {
  id: 17,
  name: '微博',
  mark: 'wb'
 },
 {
  id: 6,
  name: '微信',
  mark: 'wx'
 },
 {
  id: 7,
  name: 'APP',
  mark: 'app'
 },
 {
  id: 8,
  name: '平媒',
  mark: 'pm'
 },
 {
  id: 20,
  name: '境外',
  mark: 'overseas'
 },
 {
  id: 21,
  name: 'Facebook',
  mark: 'facebook'
 },
 {
  id: 22,
  name: 'Twitter',
  mark: 'twitter'
 }
],

4、接著標籤類型集合資料結構如下,其中mark欄位存放哪些資料來源包含於目前標籤。

markTypeList: [
{
id: 32,
name: '主帖',
mark: 'bbs'
},
{
id: 33,
name: '回帖',
mark: 'bbs'
},
{
id: 34,
name: '原创',
mark: 'wb'
},
{
id: 35,
name: '转发',
mark: 'wb_wx'
},
{
id: 36,
name: '头条',
mark: 'news_app_wx_pm'
},
{
id: 37,
name: '头图',
mark: 'app'
},
{
id: 38,
name: '置顶',
mark: 'app'
},
{
id: 39,
name: '要闻',
mark: 'news'
},
{
id: 40,
name: '头版',
mark: 'pm'
},
],

5、在資料來源的各個名稱中加入一個點擊事件,data中存入一個變數infoTypeMark,用於保存點擊的資料來源標識,我也數據來源的程式碼貼出來了。

<p v-if="isShowSingleInfoType">
<label class="left-10">数据来源</label>
<span class="info-type activecolor" @click="changeInfoType(-1)">全部</span>
<span class="info-type" @click="changeInfoType(item.id, item.mark)" v-for="item in infoTypeList" :key="item.id">{{item.name}}</span>
<label class="multichoose">
<Button @click="toggleInfoType" size="small">+多选</Button>
</label>
</p>

6、重點是下面這一行程式碼,透過在v-show中加入表達式,用於判斷點擊新聞,應該顯示頭條和要聞,主要看標紅的那塊,程式碼如下:

<p class="layout-content-main">
<label class="left-10">

#標籤型別

</label>
<span class="mark-type activecolor" @click="changeMarkType(-1)">全部</span>
<span v-show="item.mark.indexOf(infoTypeMark) > -1" class="mark-type" @click="changeMarkType(item.id)" v-for="item in markTypeList" :key="item.id">{{item.name}}</span>
</p>



上面是我整理給大家的,希望未來會對大家有幫助。 ######相關文章:#########js中apply和Math.max()函數的問題及區別介紹###############淺談Vue內建component元件的應用程式場景###############vue2中使用less簡易教學###################### #####

以上是Vue中v-show新增表達式的問題(判斷是否顯示)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
使用java的File.isDirectory()函数判断文件是否存在且为目录类型使用java的File.isDirectory()函数判断文件是否存在且为目录类型Jul 24, 2023 pm 06:57 PM

使用java的File.isDirectory()函数判断文件是否存在且为目录类型在Java编程中,经常会遇到需要判断一个文件是否存在且为目录类型的情况。Java提供了File类来操作文件和目录,其中的isDirectory()函数可以帮助我们判断一个文件是否是目录类型。File.isDirectory()函数是File类中的一个方法,其作用是判断当前Fil

如何使用Double类的isInfinite()方法判断一个数是否为无穷大如何使用Double类的isInfinite()方法判断一个数是否为无穷大Jul 24, 2023 am 10:10 AM

如何使用Double类的isInfinite()方法判断一个数是否为无穷大在Java中,Double类是用来表示浮点数的包装类。该类提供了一系列方法,可以方便地对浮点数进行操作。其中,isInfinite()方法就是用来判断一个浮点数是否为无穷大的方法。无穷大是指大到超出了浮点数所能表示的范围的正无穷和负无穷。在计算机中,浮点数的最大值可以通过Double类

如何解决Vue报错:无法正确使用v-show指令如何解决Vue报错:无法正确使用v-show指令Aug 17, 2023 pm 01:45 PM

如何解决Vue报错:无法正确使用v-show指令Vue是一款流行的JavaScript框架,它提供了一套灵活的指令和组件,使得开发单页面应用变得轻松且高效。其中v-show指令是Vue中常用的一个指令,用于根据条件动态显示或隐藏元素。然而,在使用v-show指令时,有时会遇到一些错误,如无法正确使用v-show指令导致元素不显示。本文将介绍一些常见的错误原因

解决Vue报错:无法正确使用v-show指令进行显示和隐藏解决Vue报错:无法正确使用v-show指令进行显示和隐藏Aug 19, 2023 pm 01:31 PM

解决Vue报错:无法正确使用v-show指令进行显示和隐藏在Vue开发中,v-show指令是一个用于根据条件是否显示元素的指令。然而,有时我们可能会遇到在使用v-show时出现报错的情况,导致无法正确地进行显示和隐藏。本文将为大家介绍一些解决方法,并提供一些代码示例。指令使用错误在Vue中,v-show指令是一个条件指令,它根据表达式的真假来决定元素是否显示

Vue中如何使用v-show与v-if结合实现动态页面渲染Vue中如何使用v-show与v-if结合实现动态页面渲染Jun 11, 2023 pm 11:27 PM

Vue是一种流行的JavaScript框架,用于构建动态Web应用程序。v-show和v-if都是Vue中用于动态渲染视图的指令。它们可以帮助我们在不显示或隐藏DOM元素时更好地控制页面。本文将详细说明如何在Vue中使用v-show和v-if指令结合使用来实现动态页面渲染。Vue中的v-show指令v-show是Vue中一个指令,它根据表达式的值来动态显示

如何解决Python的表达式语法错误?如何解决Python的表达式语法错误?Jun 24, 2023 pm 05:04 PM

Python作为一种高级编程语言,易于学习和使用。一旦需要编写Python程序时,无法避免地遇到语法错误,表达式语法错误是常见的一种。在本文中,我们将讨论如何解决Python的表达式语法错误。表达式语法错误是Python中最常见的错误之一,它通常是由于错误的使用语法或缺少必要组件而导致的。在Python中,表达式通常由数字、字符串、变量和运算符组成。最常见的

Vue条件渲染的进阶技巧:灵活运用v-if、v-show、v-else、v-else-if打造动态界面Vue条件渲染的进阶技巧:灵活运用v-if、v-show、v-else、v-else-if打造动态界面Sep 15, 2023 am 09:22 AM

Vue条件渲染的进阶技巧:灵活运用v-if、v-show、v-else、v-else-if打造动态界面在Vue中,条件渲染是一项非常重要的技巧,可以根据不同的条件来显示或隐藏特定的界面元素,提高用户体验和界面的灵活性。Vue提供了多种条件渲染的指令,包括v-if、v-show、v-else和v-else-if。下面将介绍这些指令的用法,并提供具体的代码示例。

Vue条件渲染的神器:深入解析v-if、v-show、v-else、v-else-if的运用Vue条件渲染的神器:深入解析v-if、v-show、v-else、v-else-if的运用Sep 15, 2023 pm 12:54 PM

Vue是一款非常流行的前端框架,它提供了丰富的功能来帮助我们构建交互性强的网页应用。其中,条件渲染是Vue的一个重要特性,通过它我们可以根据条件来动态地显示或隐藏某个元素。在Vue中,我们可以使用v-if、v-show、v-else、v-else-if等指令来实现条件渲染,下面我们就来深入解析这些指令的运用,并提供具体的代码示例。首先我们来介绍v-if指令。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境