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. 常见C++内存池技术

    原文:http://www.cppblog.com/weiym/archive/2013/04/08/199238.html 总结下常见的C++内存池,以备以后查询.应该说没有一个内存池适合所有的情况 ...

  2. 如何使用keepalived实现nginx双机热备

    1.linux安装方法:yum -y install keepalived 配置开机启动:sudo chkconfig  keepalived on 查看keepalivede运行日志:/var/lo ...

  3. qsort(),sort()排序函数

    一.qsort()函数 功 能: 使用快速排序例程进行排序 头文件:stdlib.h 用 法: void qsort(void *base,int nelem,int width,int (*fcmp ...

  4. django 实现上传文件功能

    需求:自己写一个文件上传功能 代码: urls.py from django.conf.urls import url from django.contrib import admin from ap ...

  5. T-SQL 之 运行时生成语句

    一.用EXECUTE执行动态命令 EXECUTE命令可以执行存储过程.函数和动态的字符串命令.注意此语句的作用正如前面在介绍批处理时,如果批中的第一条语句是"EXECUTE Proc_nam ...

  6. 使用CopyTable工具方法在线备份HBase表

    CopyTable is a simple Apache HBase utility that, unsurprisingly, can be used for copying individual ...

  7. Linux下的编译器(转)

    转自:http://ju.outofmemory.cn/entry/2051 简单的说,编译器就是一个可执行程序,它专门用于将程序员易于编写的高级语言 (如 C 语言) 翻译为机器可以识别的低级语言. ...

  8. excel 如何为列添加指定内容(字符串)

      excel 如何为列添加指定内容(字符串) CreateTime--2018年5月26日17:52:32 Author:Marydon 1.情景展示 D列的值需要获取B列的值并且在后面统一加上12 ...

  9. 查看IE浏览器安装的插件

      请移步至文章:http://blog.sina.com.cn/u/6452627072  

  10. 【CentOS6.5】MySQL安装和配置

    1./etc/my.cnf 这是mysql的主配置文件 2.数据存放位置 3.错误存放位置