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
-
设置变量index，初始值为空
-
利用v-for渲染数据，得到当前元素的下标i，并添加点击事件
-
触发点击事件时，将当前元素的下标i赋值给变量index，此时变量index有且只有一个值，即与当前元素的下标相等。以此作为动态切换css样式的条件。
-
在图片区域同样只需要将变量index与当前图片的下标i，作为图片动态切换的条件。同一点击事件下，变量index、元素下标i与图片下标i相同，实现联动。
input添加：
- 利用数组push()方法，添加选项
this.roles.push({id: this.id++, name: this.name, src: this.src})
- 也可以利用Vue.set()方法添加选项
this.$set(this.roles, this.roles.length, {id: this.id++, name: this.name, src: this.src})
- 通过变量修改视图
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 = ""
}
},