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标签文字颜 ...
随机推荐
- Python学习(二)Python 简介
Python 简介 官方指南及文档 Python2.7官方指南(中文版):http://pan.baidu.com/s/1dDm18xr Python3.4官方指南(中文版):http://pan.b ...
- nose的setup和teardown
参考:http://blog.csdn.net/linda1000/article/details/8533349 1.模块的setUp和tearDown def setUp(): print &qu ...
- iOS:ASIHttpRequest虽不更新,但仍值得详细了解
一.使用ASIHTTPRequest可以很方便的进行一下操作:同步/异步方式下载数据,定义下载队列,让队列中的任务按指定的并发数来下载(队列下载必须是异步的),提交表单,文件上传,处理cookie,设 ...
- go语言基础之输入的使用
1.输入的使用 第一种写法:fmt.Scanf("%d", &a) 第二种写法:fmt.Scan(&a) 示例: package main //必须有一个main包 ...
- 下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用js动态创建<style>
var nod = document.createElement(“style”), str = “body{background:#000;color:#fff} a{color:#fff;text ...
- 如何:创建签名的友元程序集(C# 和 Visual Basic)
如何:创建签名的友元程序集(C# 和 Visual Basic) Visual Studio 2013 本示例演示了如何将友元程序集和具有强名称的程序集一起使用. 这两种程序集必须都使用强名称. ...
- Ubuntu 14.04安装语言包后无法选择汉语问题解决
如需转载请标明出处:http://blog.csdn.net/itas109 QQ技术交流群:129518033 安装完语言包后.尽管里面有了汉语.可是是灰色的.例如以下图所看到的: watermar ...
- FileAlreadyExistsException: Output directory hdfs://ubuntu:9000/output09 already exists
14/07/21 17:49:59 ERROR security.UserGroupInformation: PriviledgedActionException as:chenlongquan ca ...
- 解决Fiddler不能监听Java HttpURLConnection请求的方法
在默认情况下,Fiddler不能监听Java HttpURLConnection请求.究其原因,Java的网络通信协议栈可能浏览器的通信协议栈略有区别,Fiddler监听Http请求的原理是 在应用程 ...