vue中v-for通过动态绑定class实现触发效果

2024-07-28 16:23:08

vue动态绑定class练习。

：class=“{ ‘类名1'：条件表达式，‘类名2'：条件表达式… }”

<template>
 <div class="app-*">
  <ul>
   <li
    v-for="(item,i) of list"
    :key="i"
    class="item"
    @click="clickIndex=i"
    :class="{'click':i==clickIndex}"
   ></li>
  </ul>
 </div>
</template>

<script>
export default {
 data() {
  return {
   list: [1, 2, 3, 4],
   clickIndex: -1
  };
 },
 methods: {}
};
</script>
<style scoped>
.item {
 display: inline-block;
 width: 100px;
 height: 100px;
 cursor: pointer;
 border: 1px solid black;
}
.item:hover {
 background: gray;
}
.item.click {
 background: red;
}
</style>

补充：vue之v-for中给每个item动态绑定class，动态添加元素，动态删除某个元素的实现

主要解决了在v-for时，如何给每个item添加动态的样式，即是说，鼠标滑动到某一项时，可以单独改变某一项的样式，同时添加按钮等操作。以及删除某一项的操作。

<template>
 <div class="hello">
   <ul>
     <li  v-for="(item, itemIndex) in test"
        :key="item.id"
        :class="{defaultClass: itemIndex === isActive}"
        @mouseenter="onMouseEnter(itemIndex)"
        @mouseleave="onMouseLeave">
       {{ itemIndex+1 }} :{{ item.title }}
       <button v-if="isActive === itemIndex" @click="deleteItem(itemIndex)">删除({{itemIndex+1}})</button>
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   test: [
     {
       id: 1,
       title: 'title first'
     },
     {
       id: 2,
       title: 'title second'
     },
     {
       id: 3,
       title: 'title third'
     }
   ],
   isActive: ''
  }
 },
 methods: {
   onMouseEnter(index) {
     this.isActive = index
   },
   onMouseLeave() {
     this.isActive = ''
   },
   deleteItem(index) {
     this.test.splice(index, 1)
   }
 },
 computed: {

 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 /* display: inline-block; */
 margin:10px;
}
a {
 color: #42b983;
}
.defaultClass{
  background-color: red;
}
</style>

总结

以上所述是小编给大家介绍的vue中v-for通过动态绑定class实现触发效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

在vue中动态添加class类进行显示隐藏实例

如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div>  <div class
vue实现动态显示与隐藏底部导航的方法分析

本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 方式一: 1. 路由配置meta: {footShow: true, }, routes: [ { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footS
vue中动态添加class类名的方法

vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2>     <p :class="{'p1'
vue添加class样式实例讲解

vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换.案例中将通过使用:class设置字体为红色. 1.新建一个html代码页面. 2.在html代码页面创建一个<div>同时添加id为app,并添加一段文本 3.引入vue.js文件.使用<scrtip>标签引入vue文件. 4.创建vue实例.新建一个<script>标签,然后使用new Vue()创建实例. 代码: <script&g
vue--点击当前增加class,其他删除class的方法

如下所示: <div id="app"> <p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p> </div> <script> new Vue({ el: '#app', data: { datas: { da
vue中v-for通过动态绑定class实现触发效果

vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo
详解vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中父组件 <template> <div id="app&qu
vue中使用animate.css实现炫酷动画效果

目录 1.安装(在vscode终端中,使用npm安装) 2.引入 3.代码实现 animate.css 是一个来自国外的 CSS3 动画库,它提供了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果.这些效果在大多数支持CSS3的浏览器上都能保持一致.简单来说,我们使用它,只需要写很少的代码,就可以实现非常炫酷的动画效果. 官
vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: 基于vue的无缝滚动组件注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 参考配置: 向下滚动 direction:0 向下滚动 direction:1 向左滚动 direction:2 向右滚
vue中v-for循环选中点击的元素并对该元素添加样式操作

相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</
vue中的@click.native 原生点击事件

目录 @click.native原生点击事件给vue组件绑定事件时候等同于在自组件中 vue点击事件补充.native 步骤官网的解释 @click.native原生点击事件给vue组件绑定事件时候必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 等同于在自组件中子组件内部处理click事件然后向外发送click事件:$emit("click".fn) vue点击事件补充.native 发现vue中加载Element 之后键盘事件
vue中如何动态绑定图片,vue中通过data返回图片路径的方法

在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决
vue中动态绑定表单元素的属性方法

在vue中有时候可能想像使用jq一样给某个元素添加属性,如 $('#select1').attr('disabled','disabled') 这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样: <select v-model='issues' class="ui dropdown t-select-list" :disabled='isDisabled'> <option></option>
VUE v-for循环中每个item节点动态绑定不同函数的实例

一. 业务场景: 一个title 处可能有一个或多个按钮, 按钮对应不同的响应事件二. 思路 : 按钮个数根据传入的数据length 来循环渲染, 每条数据对应的事件名称通过动态绑定三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分  <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAd
vue 中动态绑定class 和 style的方法代码详解

先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

vue中v-for通过动态绑定class实现触发效果

相关推荐

随机推荐