vue2.0 实现click点击当前li,并动态添加class(这种方法不太喜欢)
1,文件内容
---- 使用v-for遍历数据
---- @click="selectSort(item)"添加点击事件,并把每个obj=item传入
---- v-show="item.show",在点击事件中,实现点击显示或隐藏
---- :class="{'active':item.show===true}" 动态添加class,判断当当前item显示时,添加active这个class
<template>
<div class="Home">
<ul>
<li v-for="item in items" @click="selectSort(item)" :class="{'active':item.show===true}">{{item.sort}} <span v-show="item.show">正确</span></li>
</ul>
/div>
</template>
<script>
export default{
data () {
return {
items: [
{sort: '综合排序', show: false},
{sort: '最新发布', show: false},
{sort: '价格从低到高', show: false},
{sort: '价格从高到低', show: false}
]
};
},
methods: {
selectSort (item) {
item.show = !item.show;
}
}
}
</script>
<style>
ul li{
width:800px;
cursor: pointer;
list-style:none;
padding:10px;
border:1px solid #000;
}
ul li>span{
float:right;
color:#ff00ff;
}
ul li.active{
color:#ff00ff;
}
</style>
2,效果
vue2.0 实现click点击当前li,并动态添加class(这种方法不太喜欢)的更多相关文章
- vue2.0 实现click点击当前li,动态切换class
1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法. 看详解:https://cn.vuejs.org/v2/a ...
- python+appium 查找某个元素find_element()并click()点击,正向判断与反判断的方法封装
使用场景: 在自动化测试过程中,难免会用到反判断,包括异常情况的处理,比如:find_element_by_name('测试') 判断"测试"是否存在,存在则点击,不存在则执行其他 ...
- Android6.0 源码修改之Setting列表配置项动态添加和静态添加
写在前面 最近客户有个需求,要求增加操作Setting列表配置项的功能,是不是一脸懵,没关系,一图胜千言,接下来就上图.诺,就是这么个意思. 原来的列表配置项 增加了单个配置项 增 ...
- DataGridView中实现点击单元格Cell动态添加自定义控件
场景 鼠标点击DataGridView的某个单元格时,此单元格添加一个自定义的控件,这里以 添加下拉框为例 效果 注: 博客主页: https://blog.csdn.net/badao_liuman ...
- vue2.0 技巧汇总
/** * Created by */ export default { trim: (str) => { //删除左右两端的空格 return str.replace(/(^\s*)|(\s* ...
- vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- 用vue2.0实现点击选中active,其他选项互斥的效果
在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...
- vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
随机推荐
- 常见C++内存池技术
原文:http://www.cppblog.com/weiym/archive/2013/04/08/199238.html 总结下常见的C++内存池,以备以后查询.应该说没有一个内存池适合所有的情况 ...
- 如何使用keepalived实现nginx双机热备
1.linux安装方法:yum -y install keepalived 配置开机启动:sudo chkconfig keepalived on 查看keepalivede运行日志:/var/lo ...
- qsort(),sort()排序函数
一.qsort()函数 功 能: 使用快速排序例程进行排序 头文件:stdlib.h 用 法: void qsort(void *base,int nelem,int width,int (*fcmp ...
- django 实现上传文件功能
需求:自己写一个文件上传功能 代码: urls.py from django.conf.urls import url from django.contrib import admin from ap ...
- T-SQL 之 运行时生成语句
一.用EXECUTE执行动态命令 EXECUTE命令可以执行存储过程.函数和动态的字符串命令.注意此语句的作用正如前面在介绍批处理时,如果批中的第一条语句是"EXECUTE Proc_nam ...
- 使用CopyTable工具方法在线备份HBase表
CopyTable is a simple Apache HBase utility that, unsurprisingly, can be used for copying individual ...
- Linux下的编译器(转)
转自:http://ju.outofmemory.cn/entry/2051 简单的说,编译器就是一个可执行程序,它专门用于将程序员易于编写的高级语言 (如 C 语言) 翻译为机器可以识别的低级语言. ...
- excel 如何为列添加指定内容(字符串)
excel 如何为列添加指定内容(字符串) CreateTime--2018年5月26日17:52:32 Author:Marydon 1.情景展示 D列的值需要获取B列的值并且在后面统一加上12 ...
- 查看IE浏览器安装的插件
请移步至文章:http://blog.sina.com.cn/u/6452627072
- 【CentOS6.5】MySQL安装和配置
1./etc/my.cnf 这是mysql的主配置文件 2.数据存放位置 3.错误存放位置