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- ...
随机推荐
- 添加删除tag
为某个分支打tag git tag -a v1. 9fceb02 删除tag git tag -d test_tag git push origin --delete tag test_tag 推送: ...
- Git 基础 - 打标签
列出现有标签(或者使用git tag -l) $ git tag v0. v1. 如果只对 1.4.2 系列的版本感兴趣 $ git tag -l 'v1.4.2.*' v1. v1. v1. v1. ...
- CentOS6.5下搭建VNC服务器
VNC(Virtual Network Computing,虚拟网络计算机)是一款由AT&T欧洲研究实验室开发的远程控制软件,允许用户在网络的任何地方使用简单的程序来和一个特定的计算机进行交互 ...
- java GUI 返回图片源码
返回图片源码,重开一个类粘贴即可 package cn.littlepage.game; import java.awt.Image; import java.awt.image.BufferedIm ...
- js_为元素动态注册事件
<head> <title></title> <script type="text/javascript">//window.onl ...
- Codefroces 958C2 - Encryption (medium)
C2 - Encryption (medium) 思路: 传统的dp: dp[i][j] 表示到第i个位置为止,分成j段的最大值 dp[i][j] = max(dp[l][j-1] + (sum[i] ...
- maven 把本地jar包打进本地仓库
maven 把本地jar包打进本地仓库 1.本地有自己写的项目jar包,但是需要用maven依赖对其进行引用: 2.某个jar包在远程仓库没有,导致pom.xml报错,此时可以从网上单独下载此jar包 ...
- MySQL中如何实现select top n ----Limit
Mysql中limit的用法详解 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,mysql已经为我们提供了这样一个功能. LIMIT 子句可以被用于强制 S ...
- @suppresswarnings(unchecked)的作用
@suppresswarnings(unchecked)的作用 一般在项目中会出现红色的报错,这个是影响项目运行的,无法启动,会停在那里,而warning警告,黄色的虽然不是会让项目停止,但是却是不规 ...
- 最新的vueWebpack项目
最近优化了我的vueWebpack多入口框架,感觉清新了好多:http://pan.baidu.com/s/1bNYJp0