Vue2利用分支、循环、属性样式绑定实现选项卡图片切换

课前准备

带领大家学习分支(if、else)、以及循环(for)
至于属性与样式绑定在上一篇文章已经讲解

• 分支
• 循环
• 实现选项卡

分支(if、else if、else)

主要指if、else if、else

如何使用

顺便把show指令学习以下
show=true，则显示,反之隐藏

<h1>分支 if elseif</h1>
    <div id="app">
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score<90&&score>=80">良好</div>
        <div v-else>差</div>
    <hr/>
    <h1>show</h1>
    <div v-show="flag">内容</div>
    </div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            score: 70,
            flag:false
        }
    })
</script>

最终show内容不会显示,if那显示差

分支的学习就完结~

---

循环(for)

语法:v-for="循环名 in 变量名"

• 循环数组
• 循环数组中的对象
• 循环单个对象

循环数组

此处顺便可以练习隔行换色
v-for="(循环名,下标) in 数组"

css

		.j{
            background-color: blueviolet;
        }
        .o{
            background-color: aqua;
        }

<div id="app">
        <div>水果列表</div>
        <ul>
            <li v-for="(item,i) in fruits" v-text="item+'--方案一--'+i" :class="i%2==0?'o':'j'"></li>
            
            <li v-for="(item,i) in fruits" v-text="item+'--方案二--'+i" :class="{o:i%2==0,j:i%2!=0}"></li>
        </ul>
</div>

var vm=new Vue({
        el:'#app',
        data:{
            fruits:['apple','orange','banana','watermelon','almond','apricot','arbutus','berry']
        }
    })

效果图:

---

循环数组中的对象

设置key=“item.id” 循环对象时确保唯一性,key是唯一的
v-for="循环名,下标 in 数组"

<div id="app">
<div>对象--水果列表</div>
        <ul>
            <!-- key="item.id" 循环对象时确保唯一性,key是唯一的 -->
            <li :key="item.id" v-for="item,k in mystuid">id={{item.id}}name={{item.name}}age={{item.age}}</li>
        </ul>
</div>

var vm=new Vue({
        el:'#app',
        data:{
            mystuid:[
                {id:1,name:'st1',age:19},
                {id:2,name:'st3',age:121},
                {id:3,name:'st5',age:13}
            ]
        }
    })

效果图:

---

循环单个对象

v-for="值,键名,下标 in 对象"

<div id="app">
<div>对象</div>
        <ul>
            <li v-for="v,k,i in obj">{{i}}---{{k}}---{{v}}</li>
        </ul>
</div>

var vm=new Vue({
        el:'#app',
        data:{
             obj:{
                name:'碰磕',
                age:18,
                stu:'博士'
            }
        }
    })

效果图:

循环的学习就完结~

---

步入正题,做出选项卡图片切换

实现选项卡

用数组中放对象来存放选项卡名称、id,以及对应的图片
用一个变量来存放下标

编写代码

css

		li{
            float: left;
            list-style: none;
            width: 200px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
            cursor: pointer;
        }
        img{
            width: 610px;
            height: 400px;
            margin-right: 30%;
            margin-left: 40px;
        }
        .active{
            background-color: red;
        }

html

<div id="app">
        <ul>
            <li :key="item.id" v-for="item in list" :class="{active:item.id==index}" @click="qh(item.id)">{{item.name}}</li>
        </ul>
        <br>
            <img v-for="item in list" v-if="item.id==index" :src="item.path">
    </div>

js

var vm=new Vue({
        el:"#app",
        data:{
            index:1,
            list:[
                {
                    id:1,
                    name:'选项卡1',
                    path:'./img/chunyu01.png'
                },
                {
                    id:2,
                    name:'选项卡2',
                    path:'./img/chunyu02.png'
                },
                {
                    id:3,
                    name:'选项卡3',
                    path:'./img/chunyu03.png'
                }
            ]
        },
        methods:{
            qh:function(id){
                this.index=id;
            }
        }
    })

最终效果图

选项卡就做好了🤭