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(这种方法不太喜欢)的更多相关文章

  1. vue2.0 实现click点击当前li,动态切换class

    1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法.  看详解:https://cn.vuejs.org/v2/a ...

  2. python+appium 查找某个元素find_element()并click()点击,正向判断与反判断的方法封装

    使用场景: 在自动化测试过程中,难免会用到反判断,包括异常情况的处理,比如:find_element_by_name('测试') 判断"测试"是否存在,存在则点击,不存在则执行其他 ...

  3. Android6.0 源码修改之Setting列表配置项动态添加和静态添加

    写在前面 最近客户有个需求,要求增加操作Setting列表配置项的功能,是不是一脸懵,没关系,一图胜千言,接下来就上图.诺,就是这么个意思.   原来的列表配置项     增加了单个配置项     增 ...

  4. DataGridView中实现点击单元格Cell动态添加自定义控件

    场景 鼠标点击DataGridView的某个单元格时,此单元格添加一个自定义的控件,这里以 添加下拉框为例 效果 注: 博客主页: https://blog.csdn.net/badao_liuman ...

  5. vue2.0 技巧汇总

    /** * Created by */ export default { trim: (str) => { //删除左右两端的空格 return str.replace(/(^\s*)|(\s* ...

  6. vue2.0变化

    之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...

  7. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  8. 用vue2.0实现点击选中active,其他选项互斥的效果

    在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...

  9. vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解

    最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...

随机推荐

  1. Python学习(二)Python 简介

    Python 简介 官方指南及文档 Python2.7官方指南(中文版):http://pan.baidu.com/s/1dDm18xr Python3.4官方指南(中文版):http://pan.b ...

  2. nose的setup和teardown

    参考:http://blog.csdn.net/linda1000/article/details/8533349 1.模块的setUp和tearDown def setUp(): print &qu ...

  3. iOS:ASIHttpRequest虽不更新,但仍值得详细了解

    一.使用ASIHTTPRequest可以很方便的进行一下操作:同步/异步方式下载数据,定义下载队列,让队列中的任务按指定的并发数来下载(队列下载必须是异步的),提交表单,文件上传,处理cookie,设 ...

  4. go语言基础之输入的使用

    1.输入的使用 第一种写法:fmt.Scanf("%d", &a) 第二种写法:fmt.Scan(&a) 示例: package main //必须有一个main包 ...

  5. 下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 利用js动态创建<style>

    var nod = document.createElement(“style”), str = “body{background:#000;color:#fff} a{color:#fff;text ...

  7. 如何:创建签名的友元程序集(C# 和 Visual Basic)

    如何:创建签名的友元程序集(C# 和 Visual Basic) Visual Studio 2013    本示例演示了如何将友元程序集和具有强名称的程序集一起使用. 这两种程序集必须都使用强名称. ...

  8. Ubuntu 14.04安装语言包后无法选择汉语问题解决

    如需转载请标明出处:http://blog.csdn.net/itas109 QQ技术交流群:129518033 安装完语言包后.尽管里面有了汉语.可是是灰色的.例如以下图所看到的: watermar ...

  9. FileAlreadyExistsException: Output directory hdfs://ubuntu:9000/output09 already exists

    14/07/21 17:49:59 ERROR security.UserGroupInformation: PriviledgedActionException as:chenlongquan ca ...

  10. 解决Fiddler不能监听Java HttpURLConnection请求的方法

    在默认情况下,Fiddler不能监听Java HttpURLConnection请求.究其原因,Java的网络通信协议栈可能浏览器的通信协议栈略有区别,Fiddler监听Http请求的原理是 在应用程 ...