html:

<div v-for = "(item,index) in items"  :class = "active == index ? 'addclass' : '' " @click='dowm(index)'>{{item.name}}</div>

css:

css:.addclass{border-bottom: 3px solid #fb7299;color: #fb7299;
}

js:

    items :[{name ：'点我1',},{name:'点我2',},{name:'点我3',}],active : -1
}dowm(index){//将点击的元素的索引赋值给变量this.active = index
}

vue中v-for循环选中点击的元素并对该元素添加样式相关推荐

vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
vue本地没事放到服务器上无限循环,解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制 ...
vue中给v-for循环出来的元素分别加样式
vue中给v-for循环出来的元素分别加样式 1.绑动态样式` <div :class="box" v-for="(item, index) in datas&qu ...
vue中的for循环路由二级路由
vue中的for循环路由二级路由 1.第一步先写需要使用的仓库,里面是需要循环的数据name的设置,class的名称,以及要跳转的路径名称 2.第二部分的样式,在正文中进行循环输出.这里需要使用rou ...
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录 vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 ...
li的鼠标移入移出事件和点击事件分别实现为当前li添加样式，删除其他li样式...
li.jsp(需要提前导入jquery.min.js 地址:http://www.cnblogs.com/zhouerba/p/7358069.html ) 鼠标移入:当前li变色,其他li恢复原 ...
Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)
场景 speak-tts插件 speak-tts - npm 实现点击按钮触发语音播报,播报指定的文字内容. 为什么不能实现自动语音播报. chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音 ...
Vue中使用a标签实现点击在新标签页中打开实现照片预览
场景显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众 ...
vue中设置子组件的点击事件不影响父组件的点击事件
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 今天分享个技术块儿. 在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击c ...

vue中v-for循环选中点击的元素并对该元素添加样式

html:

css:

js:

vue中v-for循环选中点击的元素并对该元素添加样式相关推荐

最新文章

热门文章