Vue学习笔记 —— 选项卡案例（基于Vue.js）

选项卡案例（基于vue.js）

使用v-for,v-on,v-bind,v-model完成

需求如下 ：

• 把数据渲染到页面
  • 利用 v-for将数据循环渲染到页面上
• 给每一个tab栏添加事件
  • 选中的tab栏，更改背景颜色，其他未选中的不变
  • 让tab栏 显示 对应的div（图片）
• 实现添加tab栏和div（图片）功能
  • 点击添加时需要判断，id、名称是否为空，为空给出对应的提示
  • 当没有填写图片路径时，给默认的图片路径
  • 添加完成，清空输入框的内

效果图如下：

HTML结构

<div id="app">
	<div class="add">
	    <input type="text"     placeholder="选项卡id" />
	    <input type="text"     placeholder="选项卡名" />
	    <input type="text"     placeholder="图片路径" />        
	    <button type="button" @click="Add">添加button>
	div><br />
   	<div class="tab">        
   		<ul  class="menuList">            
   			<li>甄姬li>            
   			<li>王昭君li>            
   			<li>小乔li>            
   			<li>貂蝉li>        
   		ul>        
   			<div ><img class="cur" src="img/zj.jpg" />div>         
   			<div ><img  src="img/zj.jpg" />div>         
   			<div ><img  src="img/zj.jpg" />div>         
   			<div ><img  src="img/zj.jpg" />div>     			 
   	div>

CSS样式

HTML完成代码如下：

<div id="app">
    <div class="add">
        <input type="text" v-model="id" @blur="checkId($event)" placeholder="选项卡id" />
        <input type="text" v-model="name" placeholder="选项卡名" />
        <input type="text" v-model="src" defaultVal="" placeholder="图片路径" />
        <button type="button" @click="Add">添加button>
    div><br/>

    <div class="tab">
        <ul class="menuList">
            <li
                v-for="(item, i) in roles" 
                :key="item.id"
                @click="handleClick(i)"
                :class="[index==i ? 'active' : '']"     
            >       
                {{ item.name }}     
            li>
        ul>
        <div 
            v-for="(item, i) in roles" 
            :key="item.id" 
            :class="[index==i ? 'current' : '']"
        >
            <img :src=item.src />
        div>
    div>
div>

JS完成代码如下：

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
    	let vm = new Vue({
            el: '#app',
            data: {
                id: 6,
                name: "",
                src: "",
                index: 0,
                roles: [
                    {
                        id: 1,
                        name: '阿瑶',
                        src: 'yy.jpg'
                    },
                    {
                        id: 2,
                        name: '王昭君',
                        src: 'zj.png',
                    },
                    {
                        id: 3,
                        name: '阿珂',
                        src: 'ak.jpg'
                    },
                    {
                        id: 4,
                        name: '貂蝉',
                        src: 'dc.jpg'
                    },
                    {
                        id: 5,
                        name: '李白',
                        src: 'lb.jpg'
                    }
                ]
            },

            methods:{
                // 添加图片
                Add(){
                    // if(this.id === "") {
                    //     alert('ID不能为空')
                    // }
                    if(this.name === "") {
                        alert('Name不能为空')
                    }else if(this.src === "") {
                        this.src = "gb.jpg"

                        // 提交
                        this.submit()
                    }else{
                        // 提交
                        this.submit()
                    }

                },
 
                // 点击切换选项
                handleClick(index){
                    this.index = index
                    // console.log(this.index)
                },

                // 验证id值
                // checkId(e){
                //     let result = this.roles.some(item => {
                //         //e.target.value的值为string类型，需要先用Number()方法转成int类型，才能进行比较
                //         //或者用'=='进行比较
                //         return item.id == e.target.value
                //     })
                //     if(result){
                //         alert("ID已存在")
                //         this.id = ""
                //     }
                // },

                // 提交
                submit(){
                    // 添加选项
                    // 通过id++，让id自增，解决id重复的问题
                    //this.roles.push({id: this.id, name: this.name, src: this.src})
                    this.$set(this.roles, this.roles.length, {id: this.id++, name: this.name, src: this.src})

                    // 跳转到新添加选项
                    this.index = this.roles.length-1

                    // 清空输入框
                    // this.id = ""
                    this.name = ""
                    this.src = ""                       
                }
                    
            }
        })
    </script>

总结

选项卡思路：利用Vue动态切换css

1. 设置变量index，初始值为空

2. 利用v-for渲染数据，得到当前元素的下标i，并添加点击事件

3. 触发点击事件时，将当前元素的下标i赋值给变量index，此时变量index有且只有一个值，即与当前元素的下标相等。以此作为动态切换css样式的条件。

4. 在图片区域同样只需要将变量index与当前图片的下标i，作为图片动态切换的条件。同一点击事件下，变量index、元素下标i与图片下标i相同，实现联动。

input添加：

1. 利用数组push()方法，添加选项

this.roles.push({id: this.id++, name: this.name, src: this.src})

2. 也可以利用Vue.set()方法添加选项

this.$set(this.roles, this.roles.length, {id: this.id++, name: this.name, src: this.src})

3. 通过变量修改视图

input验证：利用input的@blur事件

当失去焦点时，可获取input当前的value值，利用数组方法some()可以验证出当前的value值是否存在于数据中，存在返回true，否则返回false

checkId(e){
    let result = this.roles.some(item => {
        //e.target.value的值为string类型，需要先用Number()方法转成int类型，才能进行比较
        //或者用'=='进行比较
        return item.id == e.target.value
    })
    if(result){
        alert("ID已存在")
        this.id = ""
    }
},