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 相关文章推荐
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
React 组件间的通信示例
Jun 14 Javascript
Vue+Django项目部署详解
May 30 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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
php split汉字
2009/06/05 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python虚拟环境virtualenv的使用教程
2017/10/20 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python colormap库的安装和使用详情
2020/10/06 Python
办公用房租赁协议书
2014/11/29 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
微信早安问候语
2015/11/10 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书