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- ...
随机推荐
- 关于System.in如何执行的问题
import java.io.IOException; public class Test1 { public static void main(String[] args) throws IOExc ...
- Type mismatch: cannot convert from javax.servlet.http.Cookie[] to org.apache.tomcat.util.http.parser.Cookie[] 的一种可能
今天用到Cookie时,写了一个Cookie数组,发现报错“Type mismatch: cannot convert from javax.servlet.http.Cookie[] to org. ...
- nRF52832-GPIOTE部分
GPIOTE部分学习思维导图 GPIOTE原理 1.1nRF52832寄存器类型 Task:任务寄存器,可以由程序或事件触发 Event:事件寄存器,事件可以产生中断和触发任务 Register:普通 ...
- Linux下的JDK和OpenJDK有什么具体的区别
OpenJDK是JDK的开放原始码版本,以GPL(General Public License)协议的形式放出(题主提到的open就是指的开源).在JDK7的时候,OpenJDK已经作为JDK7的 ...
- Codeforces Gym - 101102A - Coins
A. Coins 题目链接:http://codeforces.com/gym/101102/problem/A time limit per test 3 seconds memory limit ...
- Python Scrapy 爬取煎蛋网妹子图实例(一)
前面介绍了爬虫框架的一个实例,那个比较简单,这里在介绍一个实例 爬取 煎蛋网 妹子图,遗憾的是 上周煎蛋网还有妹子图了,但是这周妹子图变成了 随手拍, 不过没关系,我们爬图的目的是为了加强实战应用,管 ...
- c# datagridview绑定数据源(BindingList<class>)中的现象 待查
现象1: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- English trip M1 - PC7 Can I Borrow Your Ping-Pong? Teacher:Patrick
In this lesson you will learn to desribe abilities. 这节课你将学习到描述你的能力 课上内容(Lesson) 三种常见情态动词 can aux. 能 ...
- mac 配置homebrew
1.终端下输入export PATH=/usr/local/bin:$PATH 2.echo $PATH 3.安装homebrew 地址:ruby -e "$(curl -fsSL htt ...
- Hadoop中 Unable to load native-hadoop library for your platform... using builtin-java classes where applicable问题解决
环境 [root@vm8028 soft]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m [root@vm8028 sof ...