search
HomeWeb Front-endJS TutorialDetailed explanation of the steps to add expressions to v-show
Detailed explanation of the steps to add expressions to v-showMay 03, 2018 pm 01:54 PM
v-showexpressionDetailed explanation

This time I will bring you a detailed explanation of the steps for adding expressions to v-show. What are the notes for adding expressions to v-show? Here are practical cases. Let’s take a look. one time.

1. Demand scenario

1. Let me talk about my needs first. There are two rows of options: data source and label type, as shown below Shown:

2. According to requirements, I need to automatically switch the label type below when clicking on a data source above.

Requirements The description is as follows:

#3. At first, I wanted to write down all the situations on the page. Later, I checked the official documents for a while and found a collection of data sources. It can be written like this, id is the identifier of each type, name is the name, and mark is the label type that is switched based on the currently clicked data source when a certain data source is clicked. As shown below:

 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. Then the tag type collection data structure is as follows, in which the mark field stores which data sources are included in the current tag.

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. Add a click

event to each name of the data source, and store a variable infoTypeMark in the data to save the clicked data source identification. I also posted the code of the data source.

<p>
<label>数据来源</label>
<span>全部</span>
<span>{{item.name}}</span>
<label>
<button>+多选</button>
</label>
</p>
6. The key point is the following line of code. By adding an expression to v-show, it is used to determine the clicked news. The headlines and important news should be displayed, mainly looking at the red block. The code is as follows:

<p>
<label></label></p>
Tag type

<span>全部</span>
<span> -1" class="mark-type" @click="changeMarkType(item.id)" v-for="item in markTypeList" :key="item.id">{{item.name}}</span>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles!

Recommended reading:

iview custom verification keyword input box implementation method

How to deal with v-show not taking effect

The above is the detailed content of Detailed explanation of the steps to add expressions to v-show. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Python中的GUI库wxPython详解Python中的GUI库wxPython详解Jun 09, 2023 pm 10:00 PM

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域,如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库,但他们的功能较为简单,无法满足各类复杂应用的需求。因此,Python中有许多GUI库可供选择,其中wxPython是其中一个,本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库,它基

解决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指令如何解决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与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指令。

Go语言中的Socket编程详解Go语言中的Socket编程详解Jun 01, 2023 am 08:07 AM

近年来,Go语言(也称为Golang)在程序员社区中越来越受欢迎。Go语言简单易学、高效强大、安全稳定,因此深受开发人员的喜爱。其中,Go语言对Socket编程的支持得到了广泛的关注和赞誉。本文将对Go语言中的Socket编程进行详细介绍,涉及基本原理、使用方法、代码实现等相关内容。一、Socket编程基本原理Socket编程是指在网络编程中使用Socket

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools