vue2.0中click点击当前li实现动态切换class实例方法

更新时间：2020-05-25 14:48:08
编辑：须哲彦

1，文件内容

----//为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。看详解：https://cn.vuejs.org/v2/api/#Vue-set

<template>
　　<div>
　　　　<ul>
　　　　　　<li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class="{'active':item.active,'unactive':!item.active}" >
　　　　　　{{item.select}} 
　　　　　　<span class="icon" v-show="item.active">当我是图标</span>
　　　　　　</li>
　　　　</ul>
　　</div>
</template>

<script>

　　import Vue from 'vue'

　　export default{
　　　　data(){
　　　　　　return {
　　　　　　　　active: false,
　　　　　　　　items: [
　　　　　　　　　　{select:'第一行'},
　　　　　　　　　　{select:'第二行'},
　　　　　　　　　　{select:'第三行'},
　　　　　　　　　　{select:'第四行'}
　　　　　　　　]
　　　　　　}
　　　　},


　　methods: {
　　　　selectStyle (item, index) {
　　　　　　this.$nextTick(function () {
　　　　　　　　this.items.forEach(function (item) {
　　　　　　　　　　Vue.set(item,'active',false);
　　　　　　　　});
　　　　　　　　Vue.set(item,'active',true);
　　　　　　});
　　　　}
　　}
 }
</script>

<!-- 样式 -->
<style>
　　.active{
　　　　color:red;
　　}
　　.unactive{
　　　　color:#000;
　　}
　　.icon{
　　　　float: right;
　　　　font-size:12px;
　　}


</style>

2，效果

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。

相关教程

Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法

本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

发布时间：2019-08-09
解析Vue2.0基于vue-cli+webpack Vuex的用法

下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

发布时间：2020-02-11
vue2.0中proxyTable用axios进行跨域请求的设置方法

这篇文章主要介绍了vue2.0设置proxyTable使用axios进行跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

发布时间：2020-01-02
vue2.0组件之间传值、通信的方式总结

这篇文章主要介绍了vue2.0组件之间传值、通信的多种方式以及注意要点，需要的朋友可以参考下

发布时间：2020-01-06
vue2.0结合Element-ui实例用法

这篇文章主要介绍了vue2.0结合Element-ui实战案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

发布时间：2020-02-02
Vue2.0使用过程常见的问题及解决方法

本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习，详细的介绍了使用中会遇到的各种错误，有兴趣的可以了解一下。

发布时间：2019-12-03
Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

本书从项目实践出发，手把手、心贴心地带领读者从零开始，一步一步地开发出功能相对完整的权限管理系统，从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。全书分为三篇共32章。第一篇为系统介绍篇，对系统的功能、架构和界面进行介绍，对系统的安装运行给出指南，对涉及的关键技术进行简单介绍。第二篇为后端实现篇，从数据库设计和搭建开发环境开始，全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

大小：132979 MB 项目实战
JavaScript+Vue+React全程实例

这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

大小：59150 MB MJS实例
Vue企业开发实战

本书以Vue.js 2为基础，以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

大小：109.6 MBVue.js实战电子书
Vue.js实战

尤雨溪推荐随书附赠示例代码下载资源 vue社区iView组件贡献者前端大神梁灏编写突出实战应用为王大鹏展趐鹰击长空 Vue.js实战助你攀上前端之巅

大小：196.7 MBVue电子书
前端工程师必备技能：Vue移动开发实战技巧

Vue.js是一个渐进式的JavaScript 框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。作为201

大小：122 MBVue实战电子书
水晶石技法VUE 10完全学习手册

《水晶石技法 VUE 10完全学习手册》共14章，以实例为主，共提供了50多个制作实例。第1～3章对VUE进行了总体介绍。第4～12章通过大量的实例，分别介绍了VUE的各个功能模块，包括大气、材质、地形、生态系统、函数、动画、渲染，以及VUE和其他软件的结合使用(比如，3ds Max、Poser等)。第13章安排了两个综合实例，让读者在较为全面地了解了VUE的功能之后，综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中，列出了VUE使用过程中的一些常见

大小：114191 MB VUE10学习手册
Spring Boot+Vue全栈开发实战

传统的JavaEE开发效率低下、配置臃肿、调试不便，严重制约了程序员的生产力。Spring Boot致力于简化开发配置，并为企业级开发提供一系列非业务性功能；而Vue则采用数据驱动视图的方式将程序

大小：196.3 MBSpring电子书
Node.js实战：使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用

大小：227 MBNode.js电子书
Vue.js v2.x 官方教程

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。易用会HTML、CSS、JavaScript就可以构建应用。灵活可以在一个库和一套完整框架之间自如伸缩。高效 20kB运行大小，超快虚拟 DOM，最省心的优化目录基础深入了

大小：5.11 MBVue手册
Vue.js项目实战

Vue实用、灵便、更快，为搭建详细的当代Web运用出示了需要的全部作用，其渐进式的特性也让开发人员可以轻轻松松入门，发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

大小：141 MBVue