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- ...
随机推荐
- C++图形开发相关
1. WxWidgets 2. GTK+ 3. U++ Framework 4. QT
- Teams UVA - 11609
题意就不多说了这个小规律不算难,比较容易发现,就是让你求一个数n*2^(n-1):很好想只是代码实现起来还是有点小困(简)难(单)滴啦,一个快速幂就OK了: 代码: #include<stdio ...
- [原][qt]解决qt在vs下could not find or load the Qt platform plugin "windows" in ""问题
在VS上开发qt遇到问题: 解决: 在main最开始加入: QTextCodec *xcodec = QTextCodec::codecForLocale(); QString exeDir = xc ...
- PostgreSQL安装及使用教程一(exe安装方式)
下载安装 百度搜索PostgreSQL,进入官网,选择相应版本的图形化安装程序(BigSQL)安装即可 连接数据库 对数据库操作有两种方式,一种是通过命令行工具psql,另一种是通过图形化界面pgAd ...
- SpringBoot整合Servlet的两种方式
SpringBoot整合Servlet有两种方式: 1.通过注解扫描完成Servlet组件的注册: 2.通过方法完成Servlet组件的注册: 现在简单记录一下两种方式的实现 1.通过注解扫描完成Se ...
- Discrete Log Algorithms :Baby-step giant-step 【二】
import gmpy2 def discreteLog(g,p,a): #离散对数,求 g^x=a mod p中的x table={} sq=gmpy2.isqrt(p-1) m=gmpy2.add ...
- Go使用protobuf
WIN7 + Go1.9.2+protobuf3.5.1 1.首先定义一个用于测试的proto文件test.proto,内容如下: syntax = "proto3"; packa ...
- MATLAB 矩阵处理基础
- Linux中怎么通过PID号找到对应的进程名及所在目录
有时候通过top命令可以看到有个别进程占用的内存比较大,但是top无法直接查看到进程名以及进程所在的目录.所以我们可以通过以下方法来定位. 首先需要知道PID号,可以通过top命令获取. ps -au ...
- 【debug、info、warn、error】四者之间的区别与用法
debug:需要在调试过程中输出的信息,但发布后是不需要的(当然发布后,也是看不到的) info:需要持续输出的信息(无论调试还是发布状态) warn:警告级别的信息(不严重) error:错误信息( ...