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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
javascript 表单的友好用户体现
Jan 07 Javascript
javascript数组去掉重复
May 12 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
js中new一个对象的过程
Feb 20 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
德生S2000电路分析
2021/03/02 无线电
PHP的FTP学习(一)
2006/10/09 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Js的MessageBox
2006/12/03 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
python实现发送邮件功能代码
2017/12/14 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
python烟花效果的代码实例
2020/02/25 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
C++的几个面试题附答案
2016/08/03 面试题
毕业生求职自荐信怎么写
2014/01/08 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2015年父亲节寄语
2015/03/23 职场文书
刑事申诉状范文
2015/05/20 职场文书
毕业论文指导老师意见
2015/06/04 职场文书