前言：
眼前我们对“vue绑定class不起作用 如何解决”大约比较关切，你们都想要剖析一些“vue绑定class不起作用 如何解决”的相关知识。那么小编在网络上汇集了一些有关“vue绑定class不起作用 如何解决””的相关资讯，希望朋友们能喜欢，同学们一起来学习一下吧！问题描述
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绑定class不起作用 如何解决
