解决vue点击控制单个样式的问题

既然是控制单个样式，我们的html里面的内容一定是v-for=""；渲染出来，一定要养成一个好习惯，v-for="(item,index) in items";index就是我们所说的索引。

<div class="border" v-for="(item,index) in tolos" :key="index">

我做的项目类似于微信朋友圈，弹出赞与评论按钮，点击一个全体都会弹出；我们要解决的就是点一个只弹出对应的一个，对button按钮对应其中的INDEX。

这个index对应着v-for中的index；

由于公司开发的后台是c#必须用两个@@来调用click事件，函数clickBt的函数内容是：

<div @@click="clickBt(index)" class="clickBt"><i class="fa fa-envelope fa-lg message"></i></div>

在data里面定义了activeindex

// clickBt: function (index) {
// var _this = this;
// console.log(111,index);
// _this.activeindex = index;
// _this.clickTf = !_this.clickTf;
// },

最后是在我们需要弹出的div里面写v-class:与v-if相互调用：

<div class="clickDiv" v-bind:class="{'slide':clickTf}" v-if="index == activeindex">

不BB其他的哦，只希望以后遇到同样的问题，能够自己解决吧！

以上这篇解决vue点击控制单个样式的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)

  • vue2.0 根据状态值进行样式的改变展示方法

    用户在进行流程操作的时候,一般分为进行中,未开始,已完成,前端页面就要进行相应的状态区分展示.这里测试的是背景颜色区分. demo: <span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span> statusText: { 0: ['span-delay', '进行中'], 1: ['span-fini

  • vuejs选中当前样式active的实例

    如下所示: <template> <div> <table id="longzhoufeng" class="table table-striped table-bordered" width="100%" style="border: 0 solid #fff;margin-top: 10px;"> <thead class="thead-bottom-line"

  • Vue2.0点击切换类名改变样式的方法

    1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • 解决vue点击控制单个样式的问题

    既然是控制单个样式,我们的html里面的内容一定是v-for="":渲染出来,一定要养成一个好习惯,v-for="(item,index) in items";index就是我们所说的索引. <div class="border" v-for="(item,index) in tolos" :key="index"> 我做的项目类似于微信朋友圈,弹出赞与评论按钮,点击一个全体都会弹出:我们要解决

  • 解决vue 单文件组件中样式加载问题

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • 解决vue 界面在苹果手机上滑动点击事件等卡顿问题

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 <template> <div class='content'> 页面内容 </div> </template> 在对应的组件的最外层di

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • vue实现点击追加选中样式效果

    DOM部分 <ul> <li class="liMenu" :class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu" :key="idx">{{item}} </li> </ul> JS data(){ return{ menu:['首页','列表页','详

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • 解决vue 绑定对象内点击事件失效问题

    突然的发现某段 html 代码中点击事件失效了. 仔细观察才发现,这段代码内的元素都在 vue 绑定对象中. 因此失效. 解决办法是将绑定对象内的元素点击事件换成 v-on:click. 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Vue 移动端点击出现300毫秒延迟的问题

    1. 安装模块 cnpm install fastclick -S 2. 在main.js中引入,并绑定到body import FastClick from 'fastclick' FastClick.attach(document.body); 当better-scroll和 fastclick冲突的不能点击的时候: <slider> <div v-for="item in recommends"> <a :href="item.linkUr

  • 解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

    假设你已经知道如何引入vue-quill-editor,并且遇到了跟我一样的问题(如上图),显示出来的图标排列不整齐,字体,文字大小选择时超出边框.你可以试试下面这种解决办法 . 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式. @import "../../node_modules/quill/dist/quill.snow.css"; 然后在组件中添加class名 -- class="ql-editor". <quill-edi

随机推荐