vue 给点击元素加样式,并且去掉与点击元素同类元素的样式

news/2024/7/10 2:42:55 标签: vue, javascript, js

template这样写:

<div class="outer-container">
    <div class="inner-container" v-for="(item,index) in treeLists" v-key="item.id">
        <div class="classifyRow" @click="vm.changeClassify(item.id, index)" :class="{'activity':index == classifyIndex}">{{item.name}}
        </div>
    </div>
</div>
changeClassify: (type, index) => {
    this.classifyIndex = index;
}

通过控制每一次点击改变classifyIndex 的值,来让 activity 为 true ,非常简单


http://www.niftyadmin.cn/n/1319243.html

相关文章

linux文件初学学习小记(一)

文件特殊权限&#xff1a; SUID&#xff1a;执行者需要有X权限&#xff0c;执行者在执行本文件时&#xff0c;会暂时获得程序所有者的权力 SGID:执行者需要有X权限&#xff0c;执行者在执行过程中&#xff0c;会获得该程序用户组的支持 SBIT(只对目录有效):需要该执行者对该目录…

Invariant Violation: requireNativeComponent: “RNCWebView” was not found in the UIManager

使用react-native-wechat时&#xff0c;遇到报错 Invariant Violation: requireNativeComponent: “RNCWebView” was not found in the UIManager 怎么搞都没有用&#xff0c;试了下网上的 run react-native link react-native-webview也不行 后面直接卸载app&#xff0c;重…

网络编程基础篇之JavaScript-学习笔记

1.documentWrite <html> <head><script language"JavaScript">document.write("这是电脑网络学校");document.close();</script> </head> </html> 2.paomading <html> <head> <script language"J…

C++:sprintf()的用法

在将各种类型的数据构造成字符串时&#xff0c;sprintf 的强大功能很少会让你失望。由于sprintf 跟printf 在用法上几乎一样&#xff0c;只是打印的目的地不同而已&#xff0c;前者打印到字符串中&#xff0c;后者则直接在命令行上输出。这也导致sprintf 比printf 有用得多。 …

解决The number of method references in a .dex file cannot exceed 64K的问题

需要分包build只需要 在build.gradle defaultConfig中加入 multiDexEnabled true defaultConfig {multiDexEnabled true }

JS检查输入框输入的是否是数字的一种校验方法

如下是JS检查输入框输入的是否是数字的一种校验方法&#xff1a; <form methodpost target"_blank">数字&#xff1a;<input type"text" namenum οnkeypress"checkNum(this.form)"><br> </form> <script languageja…

横向TimePicker-带三角指示器

插件比较复杂&#xff0c;先描述下功能。1.可横向滚动2.数值可自定义。3.要求有三角指示器&#xff0c;指向当前焦点4.点击后焦点改变&#xff0c;并且三角指示器可滑动变化5.焦点滚动至最左或最右时不消失&#xff08;这里使用新的view获取焦点view的值悬浮显示&#xff0c;滚…

react navigation 5.x 如何在UI组件之外访问navigation

有时&#xff0c;需要从无法访问navigation的地方&#xff0c;在这种情况下&#xff0c;可以从导航容器中存储导航ref import NavigationService from ../service/navigationServiceclass App extends React.Component {render() {return (<NavigationContainer ref{navigat…