问题形容
vue 中动静绑定类名:class 的用法比拟灵便,本案例以导航菜单点击高亮为例,简略进行解说,咱们先看一下最终的效果图。
形式一(对象写法)
代码图示如下
<template>
<div id="app">
<div class="nav">
<div
class="item"
:class="{'highLight': index == highLight}"
v-for="(item, index) in navArr"
:key="index"
@click="changeHighLight(index)"
>
{{item}}
</div>
</div>
</div>
</template>
<script>
export default {data() {
return {navArr: ["导航一", "导航二", "导航三", "导航四", "导航五", "导航六"],
highLight: 0,
};
},
methods: {changeHighLight(index) {this.highLight = index;},
},
};
</script>
<style lang="less" scoped>
.nav {
width: 240px;
height: 100%;
.item { width: 100%; height: 50px; background-color: #e9e9e9;
line-height: 50px; text-align: center; cursor: pointer; }
.item:hover {background-color: #faf;}
.highLight {background-color: #faf;}
}
</style>
形式二(methods 写法)
代码图示如下
代码附上
<template>
<div id="app">
<div class="nav">
<div
class="item" :class="fn(index)"
v-for="(item, index) in navArr"
:key="index" @click="changeHighLight(index)"
>
{{item}}
</div>
</div>
</div>
</template>
<script>
export default {data() {
return {navArr: ["导航一", "导航二", "导航三", "导航四", "导航五", "导航六"],
highLight: 0,
};
},
methods: {fn(index) {if (index == this.highLight) {return "highLight";}
},
changeHighLight(index) {this.highLight = index;},
},
};
</script>
<style lang="less" scoped>
.nav {
width: 240px; height: 100%;
.item {
width: 100%; height: 50px; background-color: #e9e9e9;
line-height: 50px; text-align: center; cursor: pointer;
}
.item:hover {background-color: #faf;}
.highLight {background-color: #faf;}
}
</style>
形式三(computed 写法)
计算属性的写法和 methods 的写法略有不同,请看正文
代码附上
<template>
<div id="app">
<div class="nav">
<div class="item" :class="eee(index)" v-for="(item, index) in navArr"
:key="index" @click="changeHighLight(index)" >
{{item}}
</div>
</div>
</div>
</template>
<script>
export default {data() {
return {navArr: ["导航一", "导航二", "导航三", "导航四", "导航五", "导航六"],
highLight: 0,
};
},
computed: {
/* 间接这样写就会报错:Error in render: "TypeError: _vm.eee is not a function"
计算属性和办法的写法略有不同,计算属性外面要 return 一个函数 */
// eee(index){// if(index == this.highLight){
// return "highLight"
// }else{
// return "kkk"
// }
// }
// 正确写法, 如果计算属性要接管参数,要 return 一个函数,在这个函数外面接管参数,并 return 对应的值
// 如果不接管参数,间接 return 值即可
eee() {return (index) => {if (index == this.highLight) {return "highLight";}
};
},
},
methods: {changeHighLight(index) {this.highLight = index;},
},
};
</script>
<style lang="less" scoped>
.nav {
width: 240px; height: 100%;
.item {width: 100%; height: 50px; background-color: #e9e9e9; line-height: 50px; text-align: center; cursor: pointer;}
.item:hover {background-color: #faf;}
.highLight {background-color: #faf;}
}
</style>
总结
:class 除了上述三种写法以外,还有数组的写法、三元表达式的写法。不过我集体感觉,别的写法和上述介绍的写法都相似,举一反三。灵活运用上述三种写法,基本上能够解决绝大多数的问题场景
好忘性不如烂笔头,记录一下。最初附上 vue 官网文档的地址:cn.vuejs.org/v2/guide/cl…