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处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 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设置允许大文件上传示例代码
2014/03/10 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
法律专业实习鉴定
2013/12/22 职场文书
知识竞赛活动方案
2014/02/18 职场文书
委托公证书范本
2014/04/03 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python
解决vue中provide inject的响应式监听
2022/04/19 Vue.js