Detailed explanation of the steps to add expressions to v-show

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 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. 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 class="layout-content-main">
<label class="left-10">

Tag type

</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>

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!