Day14-旧网站重写成Vue_5_多图片切换

昨天PO完文重看一下旧文才发现前天说要讲json做轮播，结果昨天先讲了tab….
希望今天能讲完轮播…
先根据Day12的写法写出框架

<div id="content_box" v-for="(itrI, keyI, indexI) in itr" v-if="keyI!=0">
    <div class="intro_im">
        <div class="intro_carousel" v-for="(itrm, keym, indexm) in itrI.im">
            <img :src=" itrm " v-if="keym==cnt" alt="">
        </div>
        <div class="chevron">
            <a @click="prev()" v-if="itrI.im.length!=1">
                <i class="fas fa-chevron-left"></i>
            </a>
            <a @click="next()" v-if="itrI.im.length!=1">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
    </div>
</div>

#content_box 的v-if="keyI!=0"的部分是因为我有帮各个标签内多写一个内容放置我需要给div用的ID名称，该名称放在第一个，若没设置会被显示，所以这边把它隐藏了

左右按钮的v-if="itrI.im.length!=1"的部分是因为如果只有一张图就不需要做切换，所以设置让程序自己判别需不需要用到切换按钮

先在昨天写的.intro_content_box这个class里面加上放图片的div跟左右点击的div
我现在要写的图片，是包在json档案的"tab标签>介绍>图片"中
这边介绍一下我的一堆v-for

昨天的.intro_content_box包的v-for是包给三个tab标签
里面的.content_box包的v-for是包给介绍
再里面的.intro_carousel包的v-for才是包给我现在要讲的图片

.intro_im是为了把图片跟文字做分开，下面文字也会给他包个.intro_content

图片的显示方法是跟Day12的方法一样，利用变数去控制图片要显现出哪一张
但因为现在我们一次显示了多张图片，如果还是用同一个变数去控制，便会发生点一个大家都动的情况发生

所以这边我们需要利用阵列去一一控制
首先先在data新增一个阵列

data: {
    indexs: [0, 0, 0, 0, 0, 0, 0]
}

并根据json档中的"介绍"的数量先放入相对应数量的0，给"介绍"做个别加减
然後在加减函式的地方也要做更动
在Day12中，我们只有一个图片，而且我们的阵列是放在自己的data中可以直接在函式抓取
但现在我们有多个图片，且阵列是来自本地json档，无法直接抓取，所以我们需要在点击呼叫函式时，告诉函式点击的是谁，和阵列的长度

prev(i, l) {
    if (this.indexs[i] > 0) {
        this.indexs[i]--;
    } else this.indexs[i] = l - 1;
    this.indexs.push()
},
next(i, l) {
    if (this.indexs[i] < l - 1) {
        this.indexs[i]++;
    } else this.indexs[i] = 0
    this.indexs.push()
}

我这边是设定成i跟l
i (index) 是代表该图在哪个"介绍"中，需要对对应的第几个indexs数值加减
l (length) 是代表该"介绍"有几张图
然後在加减@click时给予相对应的数值

<a @click="prev(keyI,itrI.im.length)" v-if="itrI.im.length!=1">
    <i class="fas fa-chevron-left"></i>
</a>
<a @click="next(keyI,itrI.im.length)" v-if="itrI.im.length!=1">
    <i class="fas fa-chevron-right"></i>
</a>

我在写v-for时有用英文做标记
keyI的I是代表Intro介绍的第一个字母，这边传给函式的keyI便是代表这是第几个介绍
itrI.im.length则是代表该介绍(itrI)中图片(im)的长度(length)
大家在写多个v-for时可以用一些命名去厘清各个关系，不然会混乱的

然後图片呼叫的地方也要做改变

<img :src="itrm" v-if="keym==indexs[keyI]" alt="">

图片判别显示哪张需要更改成是否对应我们设定的阵列中该项的数值
这样更改後，就能分开座左右变化了

然後用差不多的方法新增下面可以点击个点点在.intro_im中

<div class="carousel-indicators" v-if="itrI.im.length!=1">
    <div class="carousel-dots" @click="imgchoose(keym,keyI)" v-for="(itrm, keym, indexm) in itrI.im" :class="{'dotschoose':indexs[keyI]==keym}">
    </div>
</div>

跟Day12的差别就是多一个给一个keyI让函式判别是第几个介绍要做改变

imgchoose(m, i) {
    this.indexs[i] = m;
    this.indexs.push();
}

不知道有没有人发现就是我每次在阵列做出改变後，都会写一段this.indexs.push();
我一开始在写的时候无论数值怎麽改变，网页上的东西都没有变动，然後我发现，虽然後台数值做了变化，但因为网页本身没有侦测到所以没有产生对应变化
所以需要加上this.indexs.push(); 这行，去告诉网页我变动他了噢，然後他才会乖乖的做出改变
这边不是很确定是不是我有写错什麽才导致必须多加一行程序码…
如果有人发现我写错的地方欢迎告知…

然後还有data中indexs这个阵列我是有先放预设，因为我一直抓不到json中阵列的长度去做加入，不知道有没有办法可以在程序码中去做预设不是我自己打的…

这边把文字的部分也加进去
在.intro_im下面加入文字的部分

<div class="intro_content">
    <div class="intro_title">{{itrI.title}}</div>
    <div class="intro_text">
        <p v-if="itrI.BRT!=null">
            ➤{{itrI.BRT}}</p>
        <p v-if="itrI.address!=null">
            ➤{{itrI.address}}</p>
        <p v-if="itrI.time!=null">开放时间：</p>
        <p v-if="itrI.time!=null" v-html="itrI.time"></p>
        <p v-if="itrI.intro!=null" v-html="itrI.intro"></p>
    </div>
    <div class="intro_a" v-if="itrI.fb!=null">
        <a :href="itrI.fb" target="_blank" style="color: #000;">
            <i class="fas fa-globe fa-1x"></i>
        </a>
    </div>
    <div class="intro_mine" v-if="itrI.content!=null" v-html="itrI.content">
    </div>
</div>

我把三个tab中会用到的所有div都放在一起，并用是否有内文来判断需不需要显示那行字
比如说.intro_a是FOOD才会用到，其他两个的json中都没有fb这个内容

在div加上v-if="itrI.fb!=null"後，程序会自己判断
如果fb==null便是不符合判别式，就不会显示那行程序码

今天先打到这边，时间控制轮播的部分跟切换tab时indexs阵列的改动就明天一起讲