Detailed explanation of the steps to add expressions to v-show-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-05-03 13:54:42

Original

2336 people have browsed it

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'
 }
],

Copy after login

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'
},
],

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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