vue中使用双循环v-for及点击切换active,默认使第n个添加active

效果图

//  html 代码// 第一层循环
<dl class="choose-dl" v-for="(value,preindex) in selectArr"><dt class="choose-dt">{{ value.name }}</dt><dd class="choose-dd"><!--第二层循环    @click="selectActive 为点击切换active   :class="{ selectActive:index == selectArr[preindex].showItem }" 动态添加class  --><a href="javascript:void (0)" class="choose-item" @click="selectActive(preindex,index)" :class="{ selectActive:index == selectArr[preindex].showItem }"  v-for="(item,index) in value.arrList">{{ item.name }}</a></dd></dl>//   javascript代码export default {name: 'testItem',data(){return{selectArr:[{showItem: 0,name: '融资方式',arrList: [{ name: '股权' },{ name: '债权' }]},{showItem: 0,name: '所属行业',arrList: [{ name: '金融' },{ name: '互联网' },{ name: '汽车' },{ name: '美容' }]}]}},methods: {selectActive(preindex,index){// console.log(preindex);// console.log(index);this.selectArr[preindex].showItem = index}}}// css代码
<style>.choose-dl {position: relative;margin-bottom: 10px;min-height: 26px;}.choose-dt {position: absolute;top: 0;left: 0;font-weight: 700;font-size: 14px;}.choose-dd {padding-left: 80px;}.choose-item {/*font-weight: 700;*/color: #444;margin-right: 20px;margin-bottom: 5px;display: inline-block;font-size: 13px;}.selectActive{font-weight: 700;color: #477fd2;}</style>

vue中使用双循环v-for及点击切换active,默认使第n个添加active相关推荐

拼接的html点击事情不触发,关于在vue中拼接html的问题，点击事件无法执行
首先是在普通文档(也就是单个html文件中进行测试,能够正常执行) 普通情况下的结果,拼接的结果能够正常渲染并且控制台有输出: 但是在vue环境之下就会出错,点击事件并没有反应, js部分: for ...
vue中,静态书写select的option选项时如何设置默认选中项
@mishu vue中,静态书写select标签的option选项时如何设置默认选中项在vue框架下,给select标签使用v-model绑定数据时,我们的selected=''selected'' ...
vue中监听页面，禁止点击浏览器返回按钮返回
问题某个页面限制用户点击浏览器返回按钮返回解决方法在该页面的vue实例中添加mounted destroyed钩子,并且添加goBack方法加以限制 mounted () {if (window ...
Vue中video.js踩坑日记单页切换后视频无法播放
使用video.js踩坑.单页切换后视频无法播放切换页面以后正常显示效果但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了?? 解决思路在生命周期beforeDestroy函数中 ...
Vue 中实现监听keydown快捷键阻止和恢复浏览器默认事件
mounted() {window.addEventListener('keydown', this.handleEvent) }, beforeDestroy() {window.removeEve ...
JS每日一题:Vue中的diff算法？
20190125 Vue中的diff算法? 概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有di ...
[vue] vue中是如何使用event对象的？
[vue] vue中是如何使用event对象的? @click="func" 默认第一个参数传入event对象 @click="func(0, $event)" ...
初识 Vue（11）---(Vue 中的事件绑定)
Vue 中的事件绑定案例:点击 Hello World ,从黑变红,再次点击,从红变黑... 通过 class 来实现页面效果的变更方法一:(通过对象)对象绑定 <!DOCTYPE h ...
vue中路由跳转怎样刷新页面保证页面更新
vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义 <card @click.native="viewMoreRelation(item)" :ar ...

vue中使用双循环v-for及点击切换active,默认使第n个添加active

vue中使用双循环v-for及点击切换active,默认使第n个添加active相关推荐

最新文章

热门文章