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获得同源iframe内body下标签的值的方法
Sep 25 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JS制作简单的三级联动
Mar 18 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
如何使用angularJs
May 08 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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
php 模拟POST|GET操作实现代码
2010/07/20 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
第五章 php数组操作
2011/12/30 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python实现rsa加密实例详解
2017/07/19 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
《画风》教学反思
2014/04/16 职场文书
服务承诺书范文
2014/05/19 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
旅游投诉信范文
2015/07/02 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis