vue 列表选中 v-for class
地址: https://jsfiddle.net/50wL7mdz/96567/
列表循环,默认选择 样式控制
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p @click="addItems()">{{ message }}</p>
<ul>
<li v-for="(item,i) in items" @click="selected(item,i)" ><a :class="{active:item.b}" >{{item.a}}</a></li>
</ul>
</div>
new Vue({
el: '#app',
data: {
message: 'click me',
items:[]
},
methods:{
addItems(){
this.items=[{a:'a1',b:false},{a:'a2',b:true}];
},
selected(item,i){
item.b = !item.b;
this.items.push(item);
}
}
})
.active {
background-color:#f00;
}
vue 列表选中 v-for class的更多相关文章
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...
- vue列表数据倒计时存在的一些坑
vue 列表数据倒计时,在页面销毁前需要清除定时器,否着会报错. export default { data() { return { list: [] } }, mounted() { for (l ...
- 使用Vue.js实现列表选中效果
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...
- vue实现选中列表功能
<template> <div> <ul v-for="prop in items"> <dt>{{prop.name}}</ ...
- vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)
1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue实现选中效果
前情提要 好久没有写Vue了,略有生疏,这个东西还是得多用.下午看到一个需求,选择相册图片作为轮播图显示.接口返回相册列表,用户选一下再扔回去.直到我看到e.target.className我就知道这 ...
- Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
随机推荐
- P1948 [USACO08JAN]电话线Telephone Lines
传送门 思路: 二分+最短路径:可以将长度小于等于 mid 的边视为长度为 0 的边,大于 mid 的边视为长度为 1 的边,最后用 dijkstra 检查 d [ n ] 是否小于等于 k 即可. ...
- logback的使用
一.logback与log4j的比较(摘自他人博客): 1.更快的实现 Logback的内核重写了,在一些关键执行路径上性能提升10倍以上.而且logback不仅性能提升了,初始化内存加载也 ...
- C++.运行时类型判断_测试代码
ZC:C++ 编程思想——运行时类型识别 - 浅墨浓香 - 博客园.html(https://www.cnblogs.com/5iedu/articles/5585895.html) -------- ...
- PHP的session的实现机制
一.默认机制,用磁盘文件来实现PHP会话.php.ini配置:session.save_handler = files 1.session_start() A. session_start()是ses ...
- Mac 如何安装 chromedriver
1.使用brew 命令 前提是要安装 brew 这里不做介绍 使用命令 brew install chromedriver 如上图出现错误,根据提示可以使用如下命令安装 brew cask inst ...
- Python全栈开发-Day6-面向对象编程
本节内容: 面向过程VS面向对象 面向对象编程介绍 类的语法 构造函数.析构函数 私有方法.私有属性 面向对象的特性:封装.继承.多态 1.面向过程 VS 面向对象 编程范式 编程是程序员用特定的语法 ...
- fiddler学习笔记&&基本使用
周末在网上找了些fiddler相关的资料来看,学习下如何使用这个工具(平时接口测试用得比较多,在没有接口文档的情况下,可以通过抓包工具来提取需要测试的接口,ps.好久没写博客了,争取5月结束前再写2篇 ...
- JS 日期比较方法
1.日期参数格式:yyyy-mm-dd // a: 日期a, b: 日期b, flag: 返回的结果 function duibi(a, b,flag) { var arr = a.split(&qu ...
- 当实体类中entity/DTO/VO等类中,有枚举值,应该怎么输出?
当实体类中entity/DTO/VO等类中,有枚举值,应该怎么输出? 问题: orderStatus 和 payStatus都是枚举类,并且枚举的个数达地10来个,我们不可能在模板页面(jsp/ftl ...
- English trip M1 - AC1 My Dream Car Teacher:Corrine
In this lesson you will learn to describe an object. 课上内容(Lesson) You want to rent a car. Go to the ...