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


Posted in Javascript onDecember 06, 2018

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实现触发效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 #Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 #Javascript
JavaScript中引用vs复制示例详析
Dec 06 #Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 #Javascript
如何使用puppet替换文件中的string
Dec 06 #Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 #Javascript
You might like
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
django做form表单的数据验证过程详解
2019/07/26 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
英语教师自荐信
2014/05/26 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
刮痧观后感
2015/06/05 职场文书
趣味运动会口号
2015/12/24 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python