vue动态绑定class选中当前列表变色的方法示例
这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。
先看看效果图吧
接下来我们看看怎么实现的吧
在methods中写入一个方法
clickcategory(index){ // 这里我们传入一个当前值
this.categoryIndex = index
}
然后需要在data里面注册一下
data() {
return {
categoryIndex: 0, //点击当前背景变成白色索引
}
},
在css中设置我们当前选中项为active的类名，并给与一个白色的背景颜色
.active {
background: #fff
}
接下来在html中绑定
<li @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 选中当前动态绑定class -->
</li>
嗯哼 于是乎我们的点击选中当前改变背景色就这样完成了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍在Vue中如何动态绑定class样式？相关面试题，主要包含被问及在Vue中如何动态绑定class样式？时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍vue中动态添加class类名的方法，包括了vue中动态添加class类名的方法的使用技巧和注意事项，需要的朋友参考一下 vue 动态添加class类名，灵活得让你发狂，下面示例几个 以上这篇vue中动态添加class类名的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 对象语法 我们可以传给 v-bind:clas
-
1. 简介 本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。 2. 慕课解释 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符
-
本文向大家介绍vue中动态select的使用方法示例，包括了vue中动态select的使用方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考，具体如下： html代码如下: 通过v-model可以获取到选中的值，如果没值就默认第一个;如果有值就显示有值的那个内容 js中写如: 希望本文所述对大家vue.js程序设计有所帮助。
-
<van-pull-refresh v-model="isLoading" :style="{ height }" success-text="刷新成功" @refresh="onRefresh"> height 在 activated 里修改了一次后，页面并没有监听到变化，为什么？